jQuery dom ready and run javascript when library jquery loaded - javascript

I do not want to wait until DOM ready with $(document).ready(function(). So, how to execute my inline and not inline javascript (jQuery) code when jQuery library 100% downloaded and executed? Seems it's not safe to write code without some wrapper like $(document).ready(function(), because browser can try to execute code while jQuery library not ready.
Also I have the question about the situation with $(document).ready(function() when I have some external javascripts like addthis on the page. Am I right that DOM is NOT ready until addthis javascript not loaded?
The problem is that I am already seen some links on the page and I need to add to them some parameters with jQuery, before user will click on the link, but user click before DOM ready and parameter losses.
Thanks.

Related

Load jQuery at the end of the page?

I have some code that uses jQuery and it's in the html. I include jQuery at the bottom of the page so the problem is that every use of $. is undefined.
I remember reading somewhere that you can create a holder $ function and when the jQuery get loaded it will execute everything that called $. (like some sort of a stack).
Can you please tell me how to do this? Like with a code example or if you have that article link it will be great. :)
No, you can't make a whole bunch of jQuery calls before it's loaded and then expect something later on to play back everything.
Your choices are:
Load jQuery before things that use it.
Don't use any jQuery calls until after the page and jQuery are loaded.
Create your own list of initialization functions that you want called after jQuery is loaded and register those callbacks as the page is loading. Then, have your own function that walks that list of initialization functions and calls them all once jQuery is loaded to kick of the initialization that uses jQuery.
But, #3 seems like a lot of work that isn't really necessary. Either load jQuery up front or don't run your initialization functions that use jQuery until after it is loaded - either is cleaner and simpler.
Keep in mind that you also need to load any jQuery plugins after jQuery is loaded because they use jQuery to initialize/install themselves.
Make sure that you are not loading any plugins before you load jQuery. Plugins extend the "$" object, so if you load a plugin before loading jQuery core, then you'll get the error you described.
It could be that you have your script tag called before the jquery script is called
place the jquery.js before your script tag and it will work

how can refrence a javascript file to UserControl in asp.net

how can use from a js file in usercontrol in asp.net
in webform put this line in head but in usercontol we have not head tag
<script src="../Scripts/tiny_mce/tiny_mce.js" type="text/javascript"></script>
Use ClientScriptManager.RegisterStartUpScript to set your scripts at the end of the page at server side. Or use ready event of the JQuery ensure the dom is loaded, and then bind your client side events to your link.
RegisterStartupScript, registers your scripts at the end of the page, so your script loaded after all the elements of the page loaded.
One other option is to use ready event of the JQuery, it helps you to wait all elements of DOM loaded. You can implement your ready function at inline or server side.
The key point here is to wait for the DOM elements load.

Popup on complete load of HTML page

Here it is the situation....
I have designed a demo which is made up of HTML in which there are several images and we have made it such a way that it works offline also for ipad using manifest file.
so so once the project/demo is loaded one can use it off line and book mark it so that he can use it any time he wants.
here is the link for reference:
http://iwdfvm2730.wdf.sap.corp:1079/speeddemo/dpr921/
I need help from you guys to show a popup/loader icon when the data or every thing is loaded completely.
thanks,
Kunal
What you gave us looks like an internal corporate address, but unless you dynamically load resources, I'd suggest that you set up an onload handler: <body onload="pageLoaded()">.
You can have a look at the jQuery .load() function. Excerpt from the documentation page on the .ready() function:
While JavaScript provides the load event for executing code when a page is rendered, this event does not get triggered until all assets such as images have been completely received. In most cases, the script can be run as soon as the DOM hierarchy has been fully constructed. The handler passed to .ready() is guaranteed to be executed after the DOM is ready, so this is usually the best place to attach all other event handlers and run other jQuery code. When using scripts that rely on the value of CSS style properties, it's important to reference external stylesheets or embed style elements before referencing the scripts.
So, in essence, the .ready() function executes after loading the DOM, while the .load() function executes after all page assets (including script, CSS and image references) have loaded.

Document.ready script not working when page called into a tab

I have several pages that are called onto an ajax tabbed area. the pages that are called have javascript on them however the document.ready function will not load for each of these pages when loaded onto the tab. Instead I have had to put a button on the pages to load the function manually. Iv tried putting the document.ready function on both the page being called and the pages calling it but it still wont run. Is there any other way i can use rather than having a button? I dont want buttons displaying on my pages that have to be clicked before it looks good =(
Heres the code that calls the the page:
onclick="createNewTab('dhtmlgoodies_tabView1','Remote Access','','RemoteAccess.html',true);return false">Remote Access
All the javascript files are connected to the main page.
A button is located on the remoteaccess page:
input type='button' value='Load.' onclick='loadlightbox()'
The loadlightbox function is inside a javascript file that is conected to the main page:
loadlightbox = (function() {
$('#gallery a').lightBox({fixedNavigation:true});
});
There is no document.ready event being fired when you load the content into the page with JavaScript. Most libraries just stick what is returned with innerHTML. Most libraries just rip out the JavaScript code from the responseText and run it through eval().
You probably want to forget the whole document.ready and just stick the code block at the end.
The document.ready function won't fire because the page (document) is already loaded. The remote page is loaded as content not as a document.
Since you are using jquery you should take advantage of the .load function and also you should take a unobtrusive approach to attaching the onclick to your link. This allows your JS and code to be separate.
//Using Jquery load
$("#id_of_link").click(function(e){
e.preventDefault();
$('#dhtmlgoodies_tabView1').load("RemoteAccess.html",
function(){
//callback code here
})
})

Can I assume that DOM is not ready yet on dynamically loaded JS script?

I have written an external script that needs to run after DOM is ready (or after onload if thats impossible).
I use this method to load the script dynamically since I need parameters on the script:
<script type="text/javascript">
document.write(unescape("%3Cscript src='mydomain.com/script.js.php?u="+encodeURIComponent(window.location.host)+"' type='text/javascript'%3E%3C/script%3E"));
</script>
To start the script on time I use cross browser methods to attach the dom ready or onload events.
My question: Can I assume that DOM is ready when my script runs and run my script immediately or that DOM is not ready, and attach to DOM ready event (OR document load)?
If I cannot assume for sure either, my question is how can I tell if DOM is already ready (on the different browsers) when my script runs? In this case the methods to start the script on DOM ready or document load events will not work because the events were already fired.
Notes: 1.I have no control on the web sites the script will be attached to.
2. Can't use Jquery or other library.
You can be almost sure that dom is not ready yet.
This is a good reference to get this working as you want.
I would either:
1) Load dynamically that script and then attach function to onload even to call/do whatever you want with that off-site .js .
2) Load the script only after DOM is ready.
Put the script near the end of the body of the document. Anything above will be available when your script is invoked (because the browser will have to have parsed it to see your script tag; QED).
Note that other resources (like images or frames) can still be loading at that time.

Categories