none
リストアイテムを取得するJavascriptを2ファイル読み込むとエラーが発生する RRS feed

  • 質問

  • サイト内の2つのリストのアイテムを取得するJavascriptを作成しています。

    スクリプトは構造としては下記のような内容で、似た内容でそれぞれ別のリストを取得するようにした2つのJSファイルを作成し、JSファイルを読み込むためのテキストファイルをコンテンツエディタwebパーツのリンクURLで読み込んでいます。

    リストのアイテムを取得するJavascript

    ////////////////////////////////////////////////////////////////////////////////////////////////////////////

    function retrieveListItem1() {

        var clientContext = new SP.ClientContext(siteUrl);
        var oList = clientContext.get_web().get_lists().getByTitle('listtitle');

        var camlQuery = new SP.CamlQuery();
        camlQuery.set_viewXml('<View><Query><Where><Geq><FieldRef Name=\'ID\'/>' + 
            '<Value Type=\'Number\'>1</Value></Geq></Where></Query><RowLimit>10</RowLimit></View>');
        this.collListItem = oList.getItems(camlQuery);

        clientContext.load(collListItem);
        clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));        

    }

    function onQuerySucceeded(sender, args) {

        var listItemInfo = '';

        var listItemEnumerator = collListItem.getEnumerator();

        while (listItemEnumerator.moveNext()) {
            var oListItem = listItemEnumerator.get_current();
            listItemInfo += oListItem.get_item('Title');
        }

        alert(listItemInfo.toString());
    }

    function onQueryFailed(sender, args) {

        alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
    }

    ////////////////////////////////////////////////////////////////////////////////////////////////////////////

    2つのJSファイルを読み込むテキストファイル

    ////////////////////////////////////////////////////////////////////////////////////////////////////////////

    <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.1.min.js"></script> 

    <script type="text/javascript" src="/site/siteURL/SiteAssets/test1.js"></script>
    <script type="text/javascript" src="/site/siteURL/SiteAssets/test2.js"></script>

    <script>
    retrieveListItemstest1();
    retrieveListItemstest2();
    </script>

    ////////////////////////////////////////////////////////////////////////////////////////////////////////////

    ページを更新すると下記のエラーが発生します。

    「Uncaught Error: コレクションが初期化されていません。初期化が要求されていないか、その要求が実行されていません。この処理は、明示的に要求する必要があります。」

    このエラーは「var listItemEnumerator = collListItem.getEnumerator();」で発生しています。また、2つのJSのうち1つは動作しております。スクリプトを1ファイルだけ実行させた場合はこのエラーは発生しません。

    原因をご存知でしたら教えて頂けないでしょうか。

    2016年3月20日 16:16

回答

  • この書き方だと、呼び出し元がグローバルスコープかと思いますので、this.collListItem もグローバルに存在してしまっているのではないでしょうか?そのため、retrieveListItem1 が呼び出されたあと、onQuerySucceeded が呼ばれる前に、retrieveListItem2 が呼び出され、this.collListItem を上書きしており結果としてエラーになってしまうのではないかと思います。

    解決策としては、collListItem の変数名をそれぞれで変えてしまい、function の外側でグローバル変数として定義してしまうか、retrieveListItem の中でローカル変数として定義して変数のスコープを関数にしておいて、onQueryScceeded なども retrieveListItem の中に入れてしまうなどが考えられるかと思います。

    • 回答の候補に設定 佐伯玲 2016年3月24日 4:14
    • 回答としてマーク 佐伯玲 2016年4月1日 7:43
    2016年3月22日 2:15