How to make script execution wait until jquery is loaded

How to make script execution wait until jquery is loaded

I am having a problem where the page is loading so fast, that jquery hasn’t finished loading before it is being called by a subsequent script. Is there a way to check for the existence of jquery and if it doesn’t exist, wait for a moment and then try again?

In response to the answers/comments below, I am posting some of the markup.
The situation… asp.net masterpage and childpage.
In the masterpage, I have a reference to jquery.
Then in the content page, I have a reference to the page-specific script.
When the page specific script is being loaded, it complains that “$ is undefined”.
I put alerts at several points in the markup to see the order in which things were firing, and confirmed that it fires in this order:

Master page header.
Child page content block 1 (located inside the
head of the masterpage, but after the masterpage scripts are
called).
Child page content block 2.

Here is the markup at the top of the masterpage:
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="SiteMaster" %>



Reporting Portal





Then in the body of the masterpage, there is an additional ContentPlaceHolder:

In the child page, it looks like so:
<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Dashboard.aspx.cs" Inherits="Data.Dashboard" %>
<%@ Register src="../userControls/ucDropdownMenu.ascx" tagname="ucDropdownMenu" tagprefix="uc1" %>


***CONTENT HERE***

Here is the content of the “../Script/Dashboard.js” file:
$(document).ready(function () {

$(‘.tgl:first’).show(); // Show the first div

//Description: East panel parent tab navigation
$(‘.tabNav label’).click(function () {
$(‘.tabNav li’).removeClass(‘active’)
$(this).parent().addClass(‘active’);

var index = $(this).parent(‘li’).index();
var divToggle = $(‘.ui-layout-content’).children(‘div.tgl’);

//hide all subToggle divs
divToggle.hide();
divToggle.eq(index).show();
});

});

Solutions/Answers:

Solution 1:

edit

Could you try the correct type for your script tags?
I see you use text/Scripts, which is not the right mimetype for javascript.

Use this:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 
<script type="text/javascript" src="../Scripts/jquery.dropdownPlain.js"></script>
<script type="text/javascript" src="../Scripts/facebox.js"></script>

end edit

or you could take a look at require.js which is a loader for your javascript code.

depending on your project, this could however be a bit overkill

Solution 2:

Late to the party, and similar to Briguy37’s question, but for future reference I use the following method and pass in the functions I want to defer until jQuery is loaded:

function defer(method) {
    if (window.jQuery) {
        method();
    } else {
        setTimeout(function() { defer(method) }, 50);
    }
}

It will recursively call the defer method every 50ms until window.jQuery exists at which time it exits and calls method()

An example with an anonymous function:

defer(function () {
    alert("jQuery is now loaded");
});

Solution 3:

you can use the defer attribute to load the script at the really end.

<script type='text/javascript' src='myscript.js' defer='defer'></script>

but normally loading your script in correct order should do the trick, so be sure to place jquery inclusion before your own script

If your code is in the page and not in a separate js file so you have to execute your script only after the document is ready and encapsulating your code like this should work too:

$(function(){
//here goes your code
});

Solution 4:

Yet another way to do this, although Darbio’s defer method is more flexible.

(function() {
  var nTimer = setInterval(function() {
    if (window.jQuery) {
      // Do something with jQuery
      clearInterval(nTimer);
    }
  }, 100);
})();

Solution 5:

You can try onload event. It raised when all scripts has been loaded :

window.onload = function () {
   //jquery ready for use here
}

But keep in mind, that you may override others scripts where window.onload using.

Solution 6:

the easiest and safest way is to use something like this:

var waitForJQuery = setInterval(function () {
    if (typeof $ != 'undefined') {

        // place your code here.

        clearInterval(waitForJQuery);
    }
}, 10);