Loading jQuery and jQuery UI within JSLink script

Question

How would I go about using jQuery and jQuery UI (mainly the sortable component) within a JSLink script.

So far I've tried several methods of dynamically loading javascript within the JSLink script but I can't seem to get it to work. In the firefox web developer console it just says that $ is not defined, jQuery is not defined and $.ui is not defined.

Answer 1

If the page the JSLink is on is not referencing jQuery and jQuery UI scripts, you will need to load them yourself. This can be done by for example:

function loadScript(url, callback)
{
    // adding the script tag to the head as suggested before
   var head = document.getElementsByTagName('head')[0];
   var script = document.createElement('script');
   script.type = 'text/javascript';
   script.src = url;

   // then bind the event to the callback function 
   // there are several events for cross browser compatibility
   script.onreadystatechange = callback;
   script.onload = callback;

   // fire the loading
   head.appendChild(script);
}

from Include a JavaScript file in another JavaScript file?

then you use it:

loadScript("url to jQuery", loadScript("url to jQuery UI", function (){
    // do your stuff here
});

But in my opinion, I always need jQuery on my pages so I add it through a Delegate Control: Adding jQuery to Every Page in SharePoint with Delegate Controls

In this case you can then use

ExecuteOrDelayUntilScriptLoaded("jquery path", function(){
    // Your stuff here
});

Answer 2

You can use the JSLink property to load multiple files. Include a url to the jQuery file and you have a nice workaround. Please note that you will have to use a url within the same web application, you can’t reference the library from a CDN or similar.

Try something like this:

$Field.JSLink="~sitecollection/Style Library/MicrosoftAjax.js|~sitecollection/Style Library/jquery-1.7.2.min.js|~sitecollection/Style Library/YourTemplate.js" 

Answer 3

I usually use a variant similar to what eirikb describes in his comment:

if(typeof jQuery == 'function') 
    NotifyScriptLoadedAndExecuteWaitingJobs("jquery.js");
else if (LoadSodByKey('jquery.js', null) == Sods.missing) 
    RegisterSod('jquery.js', '//code.jquery.com/jquery-1.11.0.min.js');


SP.SOD.executeFunc("jquery.js", "jQuery", function () { 
    console && console.log("jquery loaded");
});

Answer 4

In your JSLink script start with

(window.jQuery || document.write('<script src="//ajax.aspnetcdn.com/ajax/jquery/jquery-1.10.0.min.js"><\/script>'));

Result will be something like this.

(function () {
    (window.jQuery || document.write('<script src="//ajax.aspnetcdn.com/ajax/jquery/jquery-1.10.0.min.js"><\/script>'));

    var overrides = {};
    overrides.Templates = {};

    overrides.Templates.Fields = {
        "FileLeafRef": {
            "NewForm": FillDefaultTitle
        }
    };

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrides);
})();

Ofcourse you need to make sure the users can access the 'ajax.aspnetcdn.com/...' location. If not you need to host the jQuery file in your SharePoint envirnoment.