Test if jquery is loaded not using the document ready event

Question

On my site I have a jquery function which retrieves data from another (secured) server as soon as the page is loaded. Using a jsonp call I currently load this data after doc

Answer 1

I think you could just use

if (jQuery) {
   ...
}

to see if the jQuery object exists.

Ok, better would be:

if (typeof jQuery !== 'undefined') {
   ...
}

or

if (typeof jQuery === 'function') {
   ...
}

EDIT:

Don't worry about the overhead or whether the jQuery object is loaded. If you just include the jQuery library using a regular <script src="..."> tag and then execute your code without the $(document).ready, like this:

<script type="text/javascript">
   $.getJSON(_secureHost + '/base/members/current.aspx?callback=?', function (data) {
        initPage(data);
    });
</script>

It will work. The $(document).ready part is only to ensure the DOM has fully loaded before you go around trying to change DOM elements that aren't loaded yet. The jQuery library itself, including the Ajax functionality, will be there right away.

Now, if your initPage(data) call uses the DOM, which I assume it does, you could put a check in that, like this:

<script type="text/javascript">
    function initPage(data) {
        var $domObject = $('#your-dom-object');
        if ($domObject.length === 0) { // Dom object not loaded yet.
            window.setTimeout(function() {
                initPage(data);
            }, 0); // Try again after other stuff has finished.
            return;
        }
        // Do your regular stuff here.
    }
</script>

However, I don't think this would be necessary in most situations.

Answer 2

You can add either load complete function or grid complete function like shown below which will help you to do some operation on jqgrid

 height : '550',
    width : '787',
    loadComplete : function() {}
    gridComplete:function(){}

Answer 3

hi I think You should first check that is jquery and the method you are going to use is defined or not

if(typeof(jQuery)!='undefined' && typeof($.ajax)!='undefined' ){
// your code will come here
}

Answer 4

I was using footable jquery plugin. This worked for me :

if ( $.fn.footable) 
{...}

jquery version - 1.9.1 footable version - 0.5

Answer 5

As long as you place the script tag that includes jQuery above your script tag that runs your function then it should work fine.

Wrapping your script in this instead of the ready function may help:

(function() {
    // Your code here
})();

Answer 6

What I don't like about the above call, is that the jsonp can actually be exectued before the document ready event

are you sure about that?! please note you may still have images loading..etc
I guess you need to use:

$(window).load(function() {
    $.getJSON(_secureHost + '/base/members/current.aspx?callback=?', function (data) {
        initPage(data);
    });
});  

Link