Take the 2-minute tour ×
SharePoint Stack Exchange is a question and answer site for SharePoint enthusiasts. It's 100% free, no registration required.

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.

enter image description here

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.

share|improve this question
    
Side note: You should consider packaging JQuery in a distinct feature, instead of including it directly in masterpage and/or in every webpart that requires it. See spjquery.codeplex.com (disclosure: Self-promotion). It can handle different versions on different sites. Added bonus: Giving the delegate control a very low sequence number will ensure it is loaded first. –  Louis Jan 26 '12 at 14:29
    
Just out of curiosity. Why do you add another reference of jQuery when there already is a jQuery reference in the masterpage? –  Daniel Ziga Jan 26 '12 at 14:41
    
If the masterpage is changed the feature will keep working. Like what @Louuis said it may be worth putting this in a feature and making this feature depend on that and making the feature that deploys my masterpage depend on it too. –  John Jan 26 '12 at 14:45
    
I have to ask the same question as Dandroid. That is most likely the reason why your code is not working. You cannot have two calls to a javascript library. –  lazoDev Feb 8 '12 at 22:23
add comment

4 Answers

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).

share|improve this answer
add comment

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 http://stackoverflow.com/questions/2426421/adding-javascript-css-and-others-to-a-webpart-using-wspbuilder/6708260#6708260

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.

share|improve this answer
add comment

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

share|improve this answer
    
Sadly the same things happen –  John Jan 26 '12 at 14:19
    
When your page loads can you check if jquery and jquery.dataTables scripts are loaded or not (with Firefox FireBug or IE developer toolbar)? –  Vedran Rasol Jan 26 '12 at 14:23
    
Question updated –  John Jan 26 '12 at 14:32
    
@John - little update on my side also although I am just guessing :/ –  Vedran Rasol Jan 26 '12 at 14:58
add comment

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?

share|improve this answer
    
Yeah I did notice that. We are upgradding to the 1.7.1.min.js version. The latest master page has not been push to the test enviroment yet. –  John Jan 26 '12 at 14:09
    
Just make sure you're not registering different versions. It will probably create a black hole or something. ;) –  Jussi Palo Jan 26 '12 at 14:11
    
What reference do you need in the masterpage to use SharePointWebControls:ScriptLink? –  John Feb 14 '12 at 14:56
    
<%@ Register Tagprefix="SharePointWebControls" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> –  Jussi Palo Aug 24 '12 at 8:06
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.