What is the proper way to add jQuery to a MasterPage?

Question

Currently I am using this method in the header:

<script src="/_layouts/MNCAssets/scripts/jquery-1.5.1.min.js"></script>

But for some reason, my webparts that use jQuery don't appear to be registering the OnClick event for elements correctly. Am I using the correct method to add jQuery to my SharePoint 2010 MasterPage? If so, does anyone know why my OnClick events are not firing?

Answer 1

You have a couple options here (...I've used both successfully in the past):

1) Call _spBodyOnLoadFunctionNames.push("function()"); replacing function with the name of the function in your webpart. This will cause your function to be executed after the body of the page if fully loaded and in sequence with other startup client-side scripts.

2) You can go the Scripts on Demand route that's new in 2010. There's a method called ExecuteOrDelayUntilScriptLoaded that causes functions to be queued up until their dependent scripts are loaded...this is usefull if you're using the client object model and you want to make sure SP.js is loaded before you do anything else, but it can be used to check for the presence of any script file. You would just add the method to your web part's script block and have it execute you start-up function after the dependent script is loaded.

ExecuteOrDelayUntilScriptLoaded(myfunction, "sp.js");

function myfunction() {
    // do something
}

Here's a good write-up from Christian Glessner on SOD if you want to learn more on the topic: http://www.ilovesharepoint.com/2010/08/sharepoint-scripts-on-demand-spsod.html

Answer 2

This is similar to how I add jQuery for my masterpage. The only difference is the type property and my specific location for the jQuery files.

<script src="/_layouts/jquery1_5/jquery-1.5.1.min.js" type="text/javascript"></script>

You can also use a link to a CDN provider for the files like Microsoft or Google.

For the troubleshooting, first thing I check is if the file loads. You can do this with the developer tools in IE. Press F12 while viewing your site. Highlight the tab for Script and open the dropdown box just to the left of the Start debugging button. This will display all of the script files requested by your pages. Highlight the line for your jquery script. If it loaded the window will display the contents of the file. If it is blank, the file is not loaded.

Answer 3

Make sure your own code runs inside:

$(document).ready(function(){
    // code here
});

Another thing that I've come across is that some custom web parts load asynchronously meaning that when your onclick-event adder gets executed, the element you are trying to add the event to isn't in DOM yet. For example Infopath 2010 forms work like this. Those elements only appear in the page&DOM maybe 150ms after the $(document).ready gets executed..

The way I got around this is that I created a small timer script that checks every 50ms whether an element has been added yet. Quite inefficient but it did the trick!

Answer 4

use $(document).load() or $(document).ready() OR document.readyState (non - jquery)

Answer 5

Perhaps the better way is not change Masterpage and use customaction for ScriptLink to add a reference to jQuery file. my jQueryLoader project on github (https://github.com/Hameds/Araye.SharePoint.jQueryLoader) helps you easily add jQuery to your site by activating one feature. github repository has source and wsp for that.

Answer 6

I have written a feature that when activated at the Site Collection Settings, will inject the jQuery library into the Masterpage using a delegate control. That way you can add the library on a site by site basis.

Bismarck

Answer 7

You can load the jquery library within each web part. We experienced the same problem and this was the only solution that worked. The master does not load until after the web parts have loaded.