2

Currently, I have a jqueryUI.js file referenced through a <script> tag.
I have several $(document).ready() functions, which use jquery ui functions.

I am trying to load jqueryUI.js file dynamically using $.getScript

I tried the following code... 

var scriptCntr = 0; $(document.ready(function(){ scriptCntr ++; $.getScript(path, function (data, textStatus) { scriptCntr --; }); while(scriptCntr!=0){ } });

on the top of the page. The idea is to make the $(document).ready() wait till the file is downloaded, but the logic goes to the WaitLoop and stays there indefinitely. The file wouldn't download unless all the $(document).ready() is executed.

Is there a way to download the jqueryUI.js file before the first $(document).ready() is executed?

Thanks in advance.

Improve this question

3 Answers 3

Reset to default
10

You can use jQuery.holdReady(). This allows you to delay the jQuery's ready event until after the script has loaded. 

$.holdReady(true); $.getScript("myplugin.js", function() { $.holdReady(false); });
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

2

You can use this code for this target:

var wf = document.createElement('script'); wf.src = 'http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js'; wf.type = 'text/javascript'; wf.async = 'true'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(wf, s);
Improve this answer

1 Comment

+1 for putting in the effort in this answer, but you should look into deferreds found in 1.5+ check out this article: spin.atomicobject.com/2011/08/24/chaining-jquery-ajax-calls from that you can build a chained ajax function that returns a defered object, which much less code and in a much cleaner way
2

I use $.getScript() extensively for scripts that rely on jQuery being downloaded first as $.getScript() won't instantiate until jQuery is loaded (it's a method of jQuery itself, so can't run unless qQuery has loaded successfully, resolving a jQuery dependency).

A couple of side notes:

  • $.getScript() forces a download, it NEVER uses cached copies. cane be useful if you always want fresh downloads. You can use the $.ajax() method if you want to enable caching. This allows a SIGNIFICANT performance boost when downloading large files like jQuery-ui on subsequent pages. I will provide an example at the end of this answer.

  • Due to the $.getScript() method using the jqxhr model, you can check for a failed script load, and the exception being thrown. The $.getScript() function has a .fail() handler attached, you can use it like this...

using $.getScript()

var urlToLoad = "testLoader.js"; $.getScript("js/slickGrid/jquery.event.drag-2.0.min.js",function(){ // Execute script on successful load }).fail(function(jqxhr, settings, exception) { // Code to execute if script fails to load any further document.write('FAILED Script Load '+urlToLoad +': '+exception) });

using $.ajax() (for caching purposes)

var urlToLoad = "testLoader.js"; $.ajax({ dataType: "script", url: "someurl.php", cache: true, success: function() { // code to execute on script load success } }).fail(function(jqxhr, settings, exception) { // Code to execute if script fails to load any further document.write('FAILED Script Load '+urlToLoad +': '+exception) });

I personally write error codes to the screen so I can see the stop point a little easier than in a console, and I have found that console.log output sometimes fails for me depending on my debug software. Helps a LOT for troubleshooting. Using this implementation, you can make a simple dependency loader. Define an array of scripts, execute a function to fire the $.ajax() function, and do something when they're all done. And voila, dependency resolved. ReuireJAS does this, but it's a set of scripts and additional lod times. You have jQuery already loaded, so why not do that!

Example of dependency resolution please keep credits if you use it... :)

/*----------------------------------- * Script is free to use as long as * credits stay attached to script here. * jQuery Dependency Loader * created: May 15, 2012 * author: Darren Maurer * CEO/CIO/President * Monarch Research International * http://MonarchResearch.ca using jQuery-1.7.2.min.js.php (caching enabled) ------------------------------------*/ // Array of fileName to include in loader var urlsToLoadInOrder = ["js/file1.js","js/file2.js","js/file3.js"]; function ProcessDependency(urlArrayPointer) { if (urlArrayPointer >= urlsToLoadInOrder.length) { return; } var attemptedFile = urlsToLoadInOrder[urlArrayPointer]; $.ajax({ dataType: "script", url: attemptedFile, //Enable caching for performance, disable with 'cache: false' cache: true, success: function() { // code to execute on script load success urlArrayPointer++; ProcessDependency(urlArrayPointer); } }).fail(function(jqxhr, settings, exception) { // Code to execute if script fails to load any further alert('FAILED Script Load '+attemptedFile +': '+exception); return false; }); } // Set pointer to zero and instantiate the loader ProcessDependency(0); // All scripts successfully loaded in order, dependencies resolved alert('loads complete');

Then just include these two lines on your main .html or .php page

<script type="text/javascript" src="js/jquery-1.7.2.min.js.php"></script> <script src="ajaxDependencyLoader.js"> </script>

AND VOILA!!! The easiest to use dependency loader I've found yet :)

The reason I use this method, is for dependency resolution between my scripts. Each dependency set is defined as an array, and I loop through it, they load in order, and I'm happy :)

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.