But Is jQuery Already Loaded?
Many end users are taking advantage of all of the goodness that jQuery provides, whether by adding simple effects like a sliding Quick Launch, more sophisticated form enhancements like SPCascadeDropdowns from SPServices, or even writing their own scripts for more complex solutions. More than ever, the distinction between “end user” and “developer” is blurring. IMO, that’s a good thing, but it also introduces complications, of course.
As one of those end users, you owe it to yourself to talk to your SharePoint team to explain what you are doing and to find out if jQuery is already loaded in the environment. In many cases, it will already be loaded in the master page or a page layout so that it is readily available across the Site Collection. The version that is loaded can also have an impact on how plugins function, making some of them effectively useless if there’s a version mismatch.
I know that in some cases, even finding the person who might know what’s loaded in the master page or what the plans may be is well nigh impossible. In those cases, here’s a trick to find out what’s up.
In a Internet Explorer browser window with the page you want to work with open, hit F12 to open the Developer Tools, and go to the Console. The screenshot below is from IE9, where there is a separate Console tab:
If you’re in IE8, the Console is hidden under the Script tab, as below.
If you’re in an older version of IE, well, I don’t have a screenshot for you. You may also not have the Developer Tools available, as it was a separate download with IE7 and below.
In Firefox, you’ll need the firebug add-in. If you have it, you can hit F12 to open Firebug. The Console tab is the first one on the left:
Once you’ve gotten to the Console, wherever it is, type the line I show in each of the screenshots above:
jQuery.fn.jquery
Depending on where you are, you’ll then either hit enter or click on the Run button.
Somewhere on the screen, you’ll see a display like this one, which shows that jQuery version 1.7.1 is loaded…
…or you’ll see something like…
…which tells you that jQuery isn’t loaded at all.
At that point, at least you’ll know what you are dealing with. If the version number isn’t what you need (I sometimes still see jQuery 1.3.2 loaded in a master page, which is ancient) then you’ll need to talk to your SharePoint team about updating it.
Tip ‘o the skimmer to Matt Bramer (@ionline247) for the exact syntax…
https://twitter.com/#!/iOnline247/status/200574868524236800
…and @BinaryJam for asking the question in the first place!
https://twitter.com/#!/BinaryJam/status/200566890437951488
Here’s a tip for a situation I just encountered. I don’t know if others have run into this or if there is a better solution.
I found out recently that sometimes, web part authors embed an old version of jQuery in their web part. It can’t be upgraded or changed and using a newer version causes the web part to break. This has presented a few problems on pages where I’ve use the newer versions of jQuery. One thing that you can do in this instance is re-alias the jQuery object.
Normally jQuery is aliased to the $, but there may be other libraries or even older versions of jQuery that already have established the $ alias. The timing is crucial but you can alias your jQuery object to something other than the $. If you load a new version of jQuery prior to the offending web part, you can assign the new alias to a new name. For example $17 could be your new alias for version 1.7.x. Once your version of the library loads, execute the following command : var $17 = jQuery.noConflict(true);
That will assign $17 as the object for your version of jQuery. When the other web part is loaded and loads the older version of jQuery, it will use the regular $ alias. In your code, make sure to always use the $17 alias which will be the version you require.
Search the jQuery documentation for noConflict() for more examples.
Hope it helps.
Dave
@dipetersen
A quick way to know if jQuery is loaded: in the browser address bar, type:
javascript:alert(window.jQuery)
if jQuery is not loaded, the alert will return “undefined”.
This applies to any object. For example you can check if the JSON object is available:
javascript:alert(window.JSON)
This won’t give you the version number though.
doh! Actually you can get the version number by typing this in the address bar:
javascript:alert($.fn.jQuery)
Sorry:
javascript:alert($.fn.jquery);