SharePoint Online jQuery & jQuery UI WSP package

Click here to download the jQuery sandbox WSP

With SharePoint online client side scripting really leads the way in which alot of solutions will be built, so bringing in the powerful library jQuery into your toolkit you will get much more out of the Solutions you build.

While there are a few solutions to get jQuery onto SharePoint Online the approach I have implemented here is a soution that adds jQuery and jQuery UI to all pages across the Site Collection using the Google API libraries which hosts the jQuery 1.6.4, jQuery 1.8.16, jQuery UI css start theme 1.8.13
(note: I will try and keep this package up to date with new releases of jQuery so if you see me slacking then give me a reminder).

To achieve this we cannot just add it to the CustomAction ScriptSrc or else it will just prepend a /_layouts/ to our absolute path.
You can use the ~SiteCollection token as shown below if you want to host it yourself but having it Google hosted it has advantages as talked about here and you would need to add the theme images and css files into a module in your package if self hosted.

<CustomAction
ScriptSrc=”~SiteCollection/Style Library/Scripts/jquery-ui-1.8.12.custom.min.js”
Location=”ScriptLink” />

Solution
The solution is to load the scripts using the CustomAction ScriptBlock as follows:

<CustomAction
Location=”ScriptLink”
ScriptBlock=”
            function loadjQueryScripts(src) {         
                      if (window.location.href.indexOf(‘AssetPortalBrowser.aspx’) > 0) return;
                      var head = document.getElementsByTagName(‘head’)[0];         
                      var script = document.createElement(‘script’);         
                      script.type = ‘text/javascript’;          
                      script.src = src;          
                      head.appendChild(script); 
            }

            function loadUIElements(){
                      if (window.location.href.indexOf(‘AssetPortalBrowser.aspx’) > 0) return;
                      var head = document.getElementsByTagName(‘head’)[0];
                      var cssNode = document.createElement(‘link’);
                      cssNode.type = ‘text/css’;
                      cssNode.rel = ‘stylesheet’;
                      cssNode.href = ‘https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/themes/start/jquery-ui.css&#8217;;
                      cssNode.media = ‘screen’;
                      head.appendChild(cssNode);
            }
            _spBodyOnLoadFunctionNames.push(‘loadjQueryScripts(\’https://&#8230;./jquery.min.js\’)’);
            _spBodyOnLoadFunctionNames.push(‘loadjQueryScripts(\’https://&#8230;./jquery-ui.min.js\’)’);
            _spBodyOnLoadFunctionNames.push(‘loadUIElements()’);
” Sequence=”101“>
</CustomAction>

So as you can see above we are using the _spBodyOnLoadFunctionNames function to fire off our functions once the page has loaded, which in turn adds our jQuery libraries to the head tag.

Another benefit of having a global jQuery package is that you do not have to do any jQuery.js checking and/or registering in any of your other solutions that would use jQuery, just ensure you have this dependency installed.

It would be nice to see Microsoft build these options into their products, as products like DNN now have the option to tick a box to enable hosted jQuery. I am sure Microsoft wouldnt use the Google hosted libraries though 🙂

One thing to remember is that you should use the ExecuteOrDelayUntilScriptLoaded(yourFunctionName/plugin initialization, ‘sp.js’) if you use this package as you may recieve an error if you use the traditional jQuery $(function(){});
I believe this is due to the order the _spBodyOnLoadFunctionNames loads the jQuery.

Here is an example of a solution I built that requires jQuery being added to my Office 365 trial which simply changes the “more information” button to open in a nice popup rather then pushing the page down with a bad layout.