Cargando jquery y jQuery ui dentro del script jslink

Question

¿Cómo voy a usar el uso de jQUERY y JQERY UI (principalmente el componente ordenable) dentro de un script JSLINK?

Hasta ahora he intentado varios métodos para cargar dinámicamente JavaScript dentro del script JSLINK, pero parece que no puedo hacer que funcione.En la consola de desarrolladores web de Firefox, simplemente dice que $ no está definido, el jQuery no está definido y no se define $ .UI.

Answer 1

Si la página del JSLINK está activada, no se hace referencia a los scripts de JQUERY y JQERY UI, deberá cargarlos usted mismo.Esto se puede hacer por ejemplo:

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 Incluya un archivo JavaScript en otro archivo JavaScript?

entonces lo usas:

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

Pero en mi opinión, siempre necesito jquery en mis páginas, así que agrego a través de un control de delegado: agregar jquery a cada página en SharePoint con los controles del delegado

En este caso, puede usar

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

Answer 2

Puede usar la propiedad JSLINK para cargar varios archivos.Incluya una URL al archivo jquery y usted tiene una buena solución.Tenga en cuenta que tendrá que usar una URL dentro de la misma aplicación web, no puede hacer referencia a la biblioteca desde un CDN o similar.

prueba algo como esto:

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

Answer 3

Por lo general, uso una variante similar a lo que EIIKB describe en su comentario:

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

en su script jslink comience con

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

El resultado será algo así.

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

OFCURSO Debe asegurarse de que los usuarios puedan acceder a la ubicación 'AJAX.ASPNETCDN.com / ...'.Si no, necesita alojar el archivo JQery en su Envirnoment de SharePoint.