JSlinkスクリプト内のjQueryとjQuery UIをロードします

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

  •  10-12-2019
  •  | 
  •  

質問

JSlinkスクリプト内のjQueryとjQuery UI（主にソート可能コンポーネント）の使用方法。

これまでのところJSlinkスクリプト内にJavaScriptを動的にロードする方法を試みましたが、仕事に届くようです。Firefox Web開発者コンソールで$が定義されていないと言っているだけでは、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ファイルのJavaScriptファイルを含む？

それを使用します。 

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

しかし私の意見では、私はいつも私のページにjQueryが必要ですので、代議管理を通してそれを追加します： Delegateコントロールを持つSharePointのすべてのページへのjQueryの追加

この場合はを使用できます。 

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

他のヒント

JSLinkプロパティを使用して複数のファイルをロードできます。jQueryファイルにURLを含め、あなたは良い回避策を持っています。同じWebアプリケーション内で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);
})();
.

コースユーザーが 'ajax.aspnetcdn.com / ...'の場所にアクセスできることを確認する必要があります。もしそうでない場合は、SharePoint EnviNomentのjQueryファイルをホストする必要があります。

ライセンス： CC-BY-SA と 帰属
所属していません sharepoint.stackexchange
scroll top