Loading jQuery in the Correct order

Question

I wish to use a jQuery plugin in SharePoint. Currentley I have jQuery added to each page via a custom master page.

<script src="/Style Library/js/jquery-1.6.4.min.js" type="text/javascript"></script>

This can be found in the head section of the page.

I have created a web part. This web part needs jQuery to run. I add jQuery again and the requried plugin as below:

protected override void CreateChildControls()
        {
            Control control = Page.LoadControl(_ascxPath);
            Controls.Add(control);
            ScriptLink.Register(Page, "/_Layouts/js/jquery-1.7.1.min.js", false);
            ScriptLink.Register(Page, "/_Layouts/js/jquery.dataTables.min.js", false);
        }

The masterpage jQuery is being loaded after the web part. This is causing the plugin not work. If I remove the ScriptLink.Register(Page, "/_Layouts/js/jquery-1.7.1.min.js", false); I get jQuery us not defined.

If I remove jQuery from my master page it all works.

How can I get the jQuery in the masterpage to load before any other scripts being added to the page?

Updated I have updated the code to be as follows:

    protected override void CreateChildControls()
    {
        Control control = Page.LoadControl(_ascxPath);
        Controls.Add(control);
    }

and

protected override void OnPreRender(EventArgs e)
        {
            base.OnPreRender(e);
            ScriptLink.Register(Page, "/_Layouts/js/jquery-1.7.1.min.js", false);
            ScriptLink.Register(Page, "/_Layouts/js/jquery.dataTables.min.js", false);
        } 

Both are loaded on the page as can be seen by IE Dev Tool Bar.

The problem still seems that the master page jquery is loaded after as the same error is occuring. Removing ScriptLink.Register(Page, "/_Layouts/js/jquery-1.7.1.min.js", false); I get told that jQuery is not valid. It however can be seen in IE Dev Tool Bar.

Answer 1

ScriptLink only loads the script once, so I see no problem in not adding jQuery in the master page.

But, you could also have ScriptLink in master page and there should not be any conflict:

<SharePointWebControls:ScriptLink runat="server" Name="somefolder/jquery-min.js" Localizable="false"/>

By the way, did you notice you have different versions of jQuery in masterpage and in the web part?

Answer 2

I think that better solution is to load script later in your webpart. Take a look at this article on MSDN:

Creating a Web Part with Client-side Script

So put script registration in WebPart.OnPreRender Method

protected override void OnPreRender(EventArgs e)
{
    base.OnPreRender(e);
    ScriptLink.Register(Page, "/_Layouts/js/jquery.dataTables.min.js", false);
}

UPDATED

I think problem is that your script function that uses jQuery fires before jQuery and/or plugin is loaded. Try to use something like

 ExecuteOrDelayUntilScriptLoaded(jsFunctionWithjQueryPlugin, "jquery.dataTables.min.js");

Also avoid double jQuery loads (see @JussiPalo comment on black holes :) and ensure

Answer 3

First, it is a bad practice to load jQuery twice. The second time you might erase functions from other scripts that already built plugins on top of jQuery.

In your Web Part, instead of loading jQuery you should load a script that will first check if jQuery exists, then load it if the answer is no.

Second, you need to make sure that jQuery is loaded before you use it. I am afraid ScriptLink does parallel loading (not sure here), so you'll need to use a different method: either sequential load, or functions like ExecuteOrDelayUntilScriptLoaded or requireJS to make it work.

For the record, jQuery has a NoConflict mode that can be useful if you need to deal with different versions of jQuery on the same page (which is probably the case if you combine custom Master Pages and third party Web Parts).

Answer 4

You should not have to call the JS library a second time if you have it in your master page. I would update the JS library version to the 1.7.1.min.js and you will never have to reference it. For your plugins, in my opinion, it is best to stay out of the 12 hive. Look at my link here on stackoverflow Adding JavaScript, CSS and others to a WebPart using WSPBuilder.

I explain a much better way to load your JS, and css files to keep them inside of your dll instead of loading them into the 12 hive.