JSLink 스크립트 내에서 jQuery와 jQuery UI를로드합니다

sharepoint.stackexchange https://sharepoint.stackexchange.com//questions/74417

  •  10-12-2019
  •  | 
  •  

문제

JSLink 스크립트 내에서 jQuery 및 jQuery UI (주로 정렬 가능한 구성 요소)를 사용하는 방법은 무엇입니까?

지금까지 JSLink 스크립트 내에서 JavaScript를 동적으로로드하는 여러 가지 방법을 시도했지만 일을 할 수 없습니다.Firefox Web Developer 콘솔에서 $ $가 정의되어 있지 않다고 jQuery가 정의되지 않았으며 $ .ui가 정의되지 않았습니다.

도움이 되었습니까?

해결책

JSLink가 켜져있는 페이지가 jQuery 및 jQuery UI 스크립트를 참조하지 않으면 직접로드해야합니다.예를 들어 다음과 같이 수행 할 수 있습니다. 

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);
}
. 다른 JavaScript 파일에 자바 스크립트 파일 포함

다음을 사용합니다 : 

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

그러나 내 의견으로는 항상 jQuery가 필요합니다. jQuery 추가 jQuery 추가 jQuery 추가

이 경우 를 사용할 수 있습니다. 

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

다른 팁

JSLink 속성을 사용하여 여러 파일을로드 할 수 있습니다.jQuery 파일에 URL을 포함하고 멋진 해결 방법이 있습니다.동일한 웹 응용 프로그램 내에서 URL을 사용해야합니다. CDN 또는 이와 유사한 라이브러리를 참조 할 수 없습니다.

다음과 같이 시도하십시오 : 

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

나는 일반적으로 eirikb가 그의 의견을 설명하는 것과 유사한 변형을 사용합니다 : 

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

JSLink 스크립트에서 시작 

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

결과는 이와 같은 것입니다. 

(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 사용자가 'ajax.aspnetcdn.com / ...'위치에 액세스 할 수 있는지 확인해야합니다.SharePoint Envirnoment에서 jQuery 파일을 호스팅해야하지 않으면

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 sharepoint.stackexchange
scroll top