Loading JQuery et JQuery UI au sein de Jslink Script

Question

Comment allez-y utiliser JQuery et JQuery UI (principalement le composant de tri) dans un script Jslink.

Jusqu'à présent, j'ai essayé plusieurs méthodes de chargement de manière dynamique JavaScript dans le script JSLink, mais je ne peux pas sembler le faire fonctionner.Dans la console de développeur Web Firefox, il est simplement indiqué que $ n'est pas défini, JQuery n'est pas défini et $ .UI n'est pas défini.

Answer 1

Si la page Le JSLINK est activé ne fait pas référence à des scripts JQuery et JQuery UI, vous devrez les charger vous-même.Cela peut être fait par exemple:

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

de Inclure un fichier JavaScript dans un autre fichier JavaScript?

alors vous l'utilisez:

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

Mais à mon avis, j'ai toujours besoin de jQuery sur mes pages, donc je l'ajoutez à travers un contrôle de délégué: Ajout de jQuery à chaque page de SharePoint avec des contrôles de délégués

Dans ce cas, vous pouvez ensuite utiliser

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

Answer 2

Vous pouvez utiliser la propriété JSLink pour charger plusieurs fichiers.Incluez une URL dans le fichier jQuery et vous avez une bonne solution de contournement.Veuillez noter que vous devrez utiliser une URL dans la même application Web, vous ne pouvez pas référencer la bibliothèque à partir d'un CDN ou similaire.

Essayez quelque chose comme ceci:

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

Answer 3

J'utilise habituellement une variante similaire à ce que Eirikb décrit dans son commentaire:

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

dans votre script jslink commence avec

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

résultat sera quelque chose comme ça.

(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);
})();

Bien sûr, vous devez vous assurer que les utilisateurs peuvent accéder à l'emplacement 'ajax.aspnetcdn.com / ...'.Sinon, vous devez héberger le fichier jQuery dans votre SharePoint Envirnoment.