Carregando jQuery e jQuery UI no script JSLink
Pergunta
Como eu usaria jQuery e jQuery UI (principalmente o componente classificável) em um script JSLink.
Até agora, tentei vários métodos de carregamento dinâmico de javascript no script JSLink, mas não consigo fazê-lo funcionar.No console do desenvolvedor web do Firefox, apenas diz que $ não está definido, jQuery não está definido e $.ui não está definido.
Solução
Se a página em que o JSLink está não estiver fazendo referência aos scripts jQuery e jQuery UI, você mesmo precisará carregá-los.Isto pode ser feito por exemplo:
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 Incluir um arquivo JavaScript em outro arquivo JavaScript?
então você usa:
loadScript("url to jQuery", loadScript("url to jQuery UI", function (){
// do your stuff here
});
Mas na minha opinião, sempre preciso de jQuery em minhas páginas, então adiciono-o através de um Delegate Control: Adicionando jQuery a todas as páginas do SharePoint com controles delegados
Neste caso você pode então usar
ExecuteOrDelayUntilScriptLoaded("jquery path", function(){
// Your stuff here
});
Outras dicas
Você pode usar a propriedade JSLink para carregar vários arquivos.Inclua um URL para o arquivo jQuery e você terá uma boa solução alternativa.Observe que você terá que usar um URL dentro do mesmo aplicativo da web; você não pode fazer referência à biblioteca de um CDN ou similar.
Tente algo assim:
$Field.JSLink="~sitecollection/Style Library/MicrosoftAjax.js|~sitecollection/Style Library/jquery-1.7.2.min.js|~sitecollection/Style Library/YourTemplate.js"
Normalmente uso uma variante semelhante à que eirikb descreve em seu comentário:
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");
});
No seu script JSLink, comece com
(window.jQuery || document.write('<script src="//ajax.aspnetcdn.com/ajax/jquery/jquery-1.10.0.min.js"><\/script>'));
O resultado será algo assim.
(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);
})();
É claro que você precisa ter certeza de que os usuários podem acessar o local 'ajax.aspnetcdn.com/...'.Caso contrário, você precisará hospedar o arquivo jQuery em seu ambiente SharePoint.