current community

your communities

more stack exchange communities

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

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.

share|improve this question

4 Answers 4

up vote 5 down vote accepted

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
});
share|improve this answer
    
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....... –  B4Z 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!!! :( –  B4Z Aug 6 '13 at 9:37
2  
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
up vote 0 down vote

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");
});
share|improve this answer
up vote -1 down vote

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.

share|improve this answer
    
This is not a recommended approach, use scripts on demand to not disable v15/16 features. –  Hugh Wood Feb 23 at 23:21
up vote 7 down vote

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"
share|improve this answer
    
Welcome to SP.SE Daniel! –  Benny Skogberg♦ Sep 13 '13 at 6:47
    
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

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.