How to check if the jQuery library is loaded

Blog: Tutorials Blog
In this tutorial we are going to follow a classic way in order to find out if the jQuery library is properly loaded on your site or page. We will also check to see if it is loaded more than once, which would be very wrong -- the jQuery library must be loaded just once.

Let's dive directly into the Source Code of a page, the homepage say, using a web browser. I will use Firefox for this. Right-click on the page and select: View Page Source. A window opens. Use CTRL+F to search in this window, type: jquery in the search box and click on: Highlight All which is right next to it. Check all the highlighted results, looking for URLs pointing to a JS file similar to jquery.js or jquery.min.js or say, jquery-1.11.2.min.js (the filename may contain a version).

Such a URL would look like this:
External URL example:

http://code.jquery.com/jquery-1.11.2.min.js

Local URL Example 1:

/media/jui/js/jquery.min.js

Local URL Example 2:

/js/jquery.min.js

URLs to jQuery or other scripts are in between script tags, usually in the head section of the page, in the source code, like this:

< script src="http://code.jquery.com/jquery-1.11.2.min.js" type="text/javascript">< /script>

or

< script src="/js/jquery.min.js" type="text/javascript">< /script>

Go on and select the URL only, copy it, open a new browser tab and paste it. If the URL is local, prefix it with your site's domain (add your site's domain in the front). Example:

http://example.com/js/jquery.min.js

Either External or Local/Internal, the URL is ready to be tested in the new tab. Hit enter in the address bar of your browser. If the URL is valid it will load the file on the browser, like this one: [ Link ]

On the very top of the file you will see some information similar to this:

jQuery v1.11.2 | (c) 2005, 2014 jQuery Foundation, Inc. | jquery.org/license

In this particular example, this is jQuery library version 1.11.2. If the file does not load at all, then there is a issue with the URL itself, just try again. If it loads, then that jQuery library version is loaded on your site (or just on that particular page).

If you run a CMS such as Joomla, there may be extensions that force-load the jQuery library although it may already be loaded, either by the CMS itself, or another extension. This is a very wrong thing to happen, so all you have to do is keep searching for similar URLs on the same page. If you have noticed additional or wrongly loaded (or other) jQuery libraries by other extensions you may check for options on these extensions (such as 'Load jQuery: Yes/No'). An extension that loads a library such as jQuery should have such options. If you cannot find any, request from your developers to give you options. Wrongly or double loaded jQuery library or scripts can affect pageload dramatically and cause javascript functionality conflicts.

You can repeat a search using: .js as keyword to find all scripts loaded.
Finally, test if jQuery works, simply by adding the following javascript code in your html:

< script type="text/javascript">
window.onload = function()
{
    if (window.jQuery)
    {
        alert('jQuery is loaded');
    }
    else
    {
        alert('jQuery is not loaded');
    }
}
< /script>

Recommended Joomla Extension: Eorisis Elements available in both Free/Pro editions.