4

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.

7

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
});
  • Sooooo, it was working fine, and now it's not, it seems to try and load jQuery UI and then says that jQuery is undefined....... – brnby Aug 6 '13 at 9:23
  • You need to load them both. Could be a timing issue where the first script does not fully load before the second one tries to load! These kinds of questions are probably more suited for a JavaScript forum than here though. But a tip in this case is to check out the setTimeout function w3schools.com/js/js_timing.asp. Good luck! – Robert Lindgren Aug 6 '13 at 9:35
  • It's working now, sorry, silly mistake!!! :( – brnby Aug 6 '13 at 9:37
  • 3
    Why not use sharepoint.stackexchange.com/a/58636/627 (LoadSodByKey), or ` SP.SOD.registerSod('jQuery', 'code.jquery.com/jquery.min.js'); SP.SOD.executeFunc('jQuery', null, function () { console.log(jQuery); });` ? – eirikb Feb 15 '14 at 10:05
9

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" 
  • This seems logical, however it does not function for me. It seems SP calls to all of your scripts specified in JSLink asynchronously, and executes them as it gets them back. If the 'yourtemplates' file comes back before jquery, you'll run into issues. – Sean Sep 19 '14 at 16:53
2

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");
});
-1

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.

  • This is not a recommended approach, use scripts on demand to not disable v15/16 features. – Hugh Wood Feb 23 '15 at 23:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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