Loading JQuery from multiple sources

Question

I am trying to write a few small features that basically add layers of convenience to SharePoint pages. These "layers of convience" are basically JQuery wrapped in ScripLink features. For example, I have one that will disable all complex dropdowns on a page using JQuery. I have another one that replaces all Date fields with better Date fields and better date pickers. I have another one that gets rid of those ridiculous dropdowns that they use for Time, that looks like something someone would have written in 1995.

I want all of these features to be self-contained and independent. But I've stumbled upon a few problems.

The first problem is that I don't always know if jquery or jquery-ui is loaded, even if I check for it. For example, in the first feature, I check if (typeof JQuery == 'undefined'), which works fine if the page I'm on includes JQuery. If it doesn't, that's also fine .. I add it. But if I have ANOTHER jquery feature in a scriptlink, it will check if (typeof JQuery == 'undefined') before the first scriptlink has had a chance to add it. Race condition!

The second, and more serious problem, is that a page I'm on has an older version of jquery-ui (1.8.12) which, as far as I can tell, does not support the datepicker I'm using in my Better Date feature. The version I'm using in that feature is 1.10.2. But when the feature runs, and sees that jquery.ui is defined, it doesn't define it. This means that datepicker ends up being undefined.

Is there a better way of defining and registering jquery libraries on a page, so I can sort of mix-and-match whatever JQuery SP features I want on a particular site?

Something to look into - requirejs.org - if all your scripts use it, it should be taken care of — Ian
– Ian, Commented Apr 3, 2013 at 13:33

Prashant Lakhlani · Accepted Answer · 2013-04-03 13:32:22Z

2

Craig,

What you are looking for is a modular script loader. You can try RequiresJs or similar implementation of microsoft ajax which can be found here. Here is the example of Microsoft Ajax StartJs

<script src="http://ajax.microsoft.com/ajax/beta/0911/Start.js" type="text/javascript">
<script type="text/javascript">

    Sys.require([Sys.scripts.ApplicationServices], function() {
        //Application services loaded
    });
</script>

With RequiresJs you will have more flexibility.

answered Apr 3, 2013 at 13:32

Prashant Lakhlani

5,8065 gold badges27 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Craig Over a year ago

So, the custom web site would also have to use this script loader right? I can see how I could use a script-loader between my different mini-features. But if I'm deploying these mini-features to an entirely custom-site with its own jquery, and it doesn't use this script loader, I assume that I will still have problems. Is that correct?

Prashant Lakhlani Over a year ago

It will still work, you can deploy the set of js files as a module in assets or style library and then you can use it from there. Basically you need to roll out a visual studio wsp with a feature that will setup your scripts at predefined location.

Craig Over a year ago

I'm using a wsp now. But I load JQuery and JQuery-ui on a page that already has an older JQuery-ui defined. Will this let me user the new JQuery-ui, without defining two different JQuery-ui files on the same page and causing a conflict? I'll start looking into this modular script loader and see what I can figure out. It looks like it has potential.

Prashant Lakhlani Over a year ago

You can use jQuery.NoConflict, version information etc to decide on weather to load the jQuery and jQury UI or not. There are some good helper methods like _SPBodyOnLoadFunctionNames array and ExecuteOrDelayUntilScriptLoaded in sharepoint that you can use to fire a javacript function at appropriate time.

ars265 · Accepted Answer · 2013-04-03 13:38:50Z

0

If you are worried about the race condition, you could check for undefined and if jQuery has not loaded use setTimeout or setInterval for 1000 milliseconds and test again, it should have made the request by then but you could loop that until you're sure jQuery isn't loading. As for the version for jQuery UI you can use $.ui.version to get the version of the library you are using. With that you can check for a minimum version of jQuery UI but a better solution is API availability or feature testing instead of relying on the version. So if the DatePicker would be undefined, merely check for use.

answered Apr 3, 2013 at 13:38

ars265

1,9873 gold badges21 silver badges38 bronze badges

Collectives™ on Stack Overflow

Loading JQuery from multiple sources

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related