Best way to delay js loading? - javascript

I'm using a bootstrap theme that requires a few javascript files. On some of my pages I load quite a bit of content from the server which means not all the html will be on the page at the time the javascript files are evaluated.
This prevents the event handlers from binding to the html that's loaded after the javascript is evaluated. So far I've fixed the problem by loading the scripts after the ajax call is finished, but this seems pretty hokey to me. Here's my function:
$.get("/path/to/rest/call", function(data) {
$('#htmlElement').html(data);
}).done(function() {
$.getScript("/path/to/js/file.js");
});
I feel like there's a better way to do this. Is there?

There may be a cleaner way of solving this than dynamically loading the metroui library. It looks like it depends upon jQuery's .ready() to know when the page is loaded and when it can initialize it's things. But, that doesn't work for you because you are dynamically loading content via Ajax.
What you can do is you can hold off the jQuery ready() notification until after your ajax content is loaded. This will then hold off the firing of metro's initialization until after your dynamic content is loaded. This would allow you to load metro in a stock <script> tag in the <head> section like their doc suggests. The way this works is you add this to the <head> section, after jQuery is loaded:
<script>
jQuery.holdReady(true);
</script>
Then, after your ajax code has succesfully completed, you do this (from the success handler, after you've put your new content into the page):
jQuery.holdReady(false);
which then releases jQuery to call it's .ready() handlers and metro will do it's thing after your content is loaded.
See jQuery doc for jQuery.holdReady(...).

Related

Loading an external page with some external JS files using jquery AJAX

I want to load an external page into a div using Jquery AJAX and that page contains lots of external jquery plugins. I am able to load the page but plugins are not working. I want to load those jquery plugins when external page is loaded through jquery AJAX. Is there any way to do it? Please provide me the link of snippet if available.
I assume you are doing something like this.
$.get(url,data).done(function(response){
var html = response.html;
$('selector').append(html);
$('carousel').init();//example of how to manually trigger a plugin
});
Usually the plugins init method are called on an event, either a dom ready or dom load event, however in your case that init method is never triggered.So,
you need to manually trigger the plugins after loading the content.
In the example above once the content is loaded I have provided an example of how a plugin(here carousel) could be triggered.

loading a js file asynchronously from a js file that loads asynchronously

I had a javascript file(initial.js) on the page inserted through the script tag like so:
<script src="initial.js"></script>
This file creates dom elements(let say two links) and also loads another jQuery plugin(plugin.js) asynchronously via jQuery ajax method. Clicking on those two links brings up a module from the jQuery plugin(plugin.js).
The javascript file(initial.js) was then modified to load asynchronously on the page via jQuery ajax instead of via script tag. This has resulted in some events not getting attached to the links intermittently and this results in the plugin not being called.
I believe the browser is loading the async scripts in its own order and hence the links fail to launch the plugin intermittently. Any pointers to resolve this issue with this new set up?
At a high-level, I think you need to look into something like require.js. Alternatively, you could look into some jQuery event handling code which allows you to listen on load events of calls which may help you determine when one script loaded before loading the next one.
You have probably tried something like this in the past:
var output;
$.get('data.php',function(data){
output=data;
});
alert(output);
You will get an undefined error because Javascript doesn't wait around for the AJAX call to be returned before moving onto the next code.
Same thing goes for scripts. If you place multiple calls to multiple scripts, you will probably get the smallest one returned the quickest, and that script executed. If you load a script that is 10kb and then one that is 1kb, the 1kb script will probably return the quickest and then be executed even though it was called after the 10kb script.
To correct this, you could make a queue system and then only load each script after the previous has loaded:
var scripts=['script1.js','script2.js','script3.js'];
$(document).ready(function(){
loadScript();
});
function loadScript(){
if(sendQueue.length==0)
return;
$.getScript(scripts[0],function(){
scripts=scripts.slice(1);
loadScript();
});
}
But if you are loading scripts from within scripts from within scripts... very Inception like, then this still may not work.

jQuery doesn't always load

Okay so I have this page with quite a lot of javascript/jQuery in it. Now the problem is that it sometimes loads and it sometimes doesn't. It eventually gets working after a few refreshes. The page is still a prototype and it's not yet viewable to the users, but i noticed that the problem sometimes spans across the whole website. Does anyone know how to fix this? The login script is jQuery/Ajax based, the contact form is jQuery based and a lot of other design related stuff are based on jQuery as well. Without it, i have a big problemo. All functions are inside document ready functions and all the scrypt tags are using the new html 5 `async="async".
Include a jQuery fallback:
<script type="text/javascript">
if (typeof jQuery == 'undefined')
document.write(unescape("%3Cscript src='/path/jquery' type='text/javascript'%3E%3C/script%3E"));
</script>
Also, since you're using the async=async attribute you need to run your code when the scripts have finished downloading i.e.: document.load
Sounds like the async attribute is the problem. If you load jQuery asynchronously, the browser won't wait while it loads. That's great for fast rendering, but if jQuery hasn't loaded by the time your document ready functions in markup execute, they won't work.
Try removing the async attribute.

what is the best way to make sure javascript is running when page is fully loaded?

I am trying to run my javascript in my asp.net webform page but I am not sure it runs properly because all the elements are not loaded yet. How can I make sure my script is at the very bottom of the page with using jquery? So it can run when the page is loaded?
Even though everyone says use $(document).ready it's kind of an anti-pattern.
What you really want to do is put any scripts you want to load at the end of the body
<html>
<head> ... </head>
<body>
...
<script src="..." ></script>
</html>
As long as your scripts are at the end of all your other HTML content the javascript will only fire when the content above it has loaded.
With pure JavaScript, you can use
window.onload = function() {
// Page loaded
};
Or you can use jQuery's ready function:
$( document ).ready( function() {
// Dom loaded
} );
Note: jQuery's ready function fires when the DOM has loaded (unless the browser does not support a dom-ready method), not when the whole page has loaded (images, scripts, etc).
Use .ready():
$(document).ready(function($) {
// page is loaded
});
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.
With jQuery, you want to attach to the ready event. This gets fired when all DOM elements have been loaded:
jQuery(document).ready(function(){
// jQuery Code here
});
Shorthand version:
$(function(){
// ...
});
Using this method, I usually put my jQuery in an external file, or in the <head> tag.
You should put your code inside the document ready block as suggested in the JQuery documentation.
This way it will be loaded when all the scripts will be loaded.
$(document).ready(function(){
//Put your code here
});
What is the best way to make sure javascript is running when page is fully loaded?
If you mean "fully loaded" literally, i.e., all images and other resources downloaded, then you have to use an onload handler, e.g.:
window.onload = function() {
// Everything has loaded, so put your code here
};
If you mean "after all of the HTML has been parsed and all elements are accessible from script", at which point images may still be downloading, then you can either put your script at the bottom of the source HTML or use a document.ready handler. Or both. Refer to any of the other answers for details.

How to re-apply $(document).ready() to some partial HTML loaded via AJAX?

I'm still a jQuery newbie and I'm trying to integrate a ThemeForest template into my project. This ThemeForest template (vPanel) is awesome but it integrates a lot of jQuery plugins and features so I have a lot of $(document).ready() all over the place and I'm having a hard time figuring out which script does what. The reason why I'm looking for that is because all those scripts apply nicely to the page when it is initially loaded, but there are also some parts of my UI that are loaded later via AJAX. And that's where my problem starts: is there a way to re-apply all of the scripts to the partial HTML that is loaded via AJAX?
What you're looking for is the live() event. You may have to go back and change certain plugins so that things like
$("my_button").click(function(){ }
become
$("my_button").live("click", function(){ }
where "my_button" is something that could be later via AJAX.
If all that the scripts does is hook up events, you can use the delegate method (which replaces the live method) to hook them up to a containing element instead.
If the scripts does other changes to the elements, then you would need to use a context parameter so that you can reapply the changes to a specific part of the page. Example:
function applyTemplate(context) {
$('.someclass', context).each(function(){
// does something with the elements
});
}
$(function(){
// apply to whole page:
applyTemplate(document.body);
// load more content, and apply to what's loaded:
$('#somePart').load('getpart.aspx', function(){
applyTemplate($('#somePart'));
});
});

Categories

Resources