Caricamento JQuery e JQuery UI all'interno dello script JSLink

Question

Come dovrei fare usando jQuery e jQuery ui (principalmente il componente ordinabile) all'interno di uno script JSLink.

Finora ho provato diversi metodi di caricamento dinamico JavaScript all'interno dello script JSLink ma non riesco a farlo funzionare.Nella console di Sviluppatore Web Firefox, dice solo che $ non è definita, JQuery non è definito e $ .ui non è definito.

Answer 1

Se la pagina è accesa non referenziando jQuery e script Ui JQuery, dovrai caricarli da soli.Questo può essere fatto per esempio:

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

.

Da Includi un file JavaScript in un altro file JavaScript?

Quindi lo usi:

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

.

Ma a mio avviso, ho sempre bisogno di jQuery sulle mie pagine, quindi lo aggiungo attraverso un controllo delegato: Aggiunta di jQuery ad ogni pagina in SharePoint con i controlli del delegato

In questo caso è quindi possibile utilizzare

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

.

Answer 2

È possibile utilizzare la proprietà JSLink per caricare più file.Includi un URL per il file jQuery e hai una bella soluzione alternativa.Si prega di notare che è necessario utilizzare un URL all'interno della stessa applicazione Web, non è possibile fare riferimento alla libreria da un CDN o simile.

Prova qualcosa del genere:

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

.

Answer 3

Di solito uso una variante simile a ciò che Eirikb descrive nel suo commento:

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

nello script JSLink inizia con

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

.

Risultato sarà qualcosa del genere.

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

.

Ovviamente è necessario assicurarsi che gli utenti possano accedere alla posizione 'ajax.aspnetcdn.com / ...'.Se non è necessario ospitare il file JQuery nel tuo ambiente SharePoint.