在同一页面上运行2个类似的JavaScript

时间：2019-05-14 15:48:21

标签： javascript methods sharepoint-2013

我在SPS2013的站点资产目录中有2个js文件。每个脚本中的代码相似。我需要在2个内容编辑器Web部件（CEWP）的同一SharePoint页面上使用每个脚本。我在此线程“在同一页面上运行2个相同的javascript”上读到，更改方法名称可以解决这种问题，但是，我还没有做到这一点。当页面上只有一个CEWP时，每个脚本将按预期运行，当我添加另一个脚本时，两个脚本的结果最终都将在同一CEWP中。

我重命名了我要输出到的DIV的所有方法和ID。我在控制台中没有任何错误。我本以为在标签中运行的每个脚本都会有所帮助，但是没有运气。我不确定这是SharePoint模板还是JS模板。 JS非常新，所以请保持简单。

我在下面添加了两个脚本：

脚本1 

<html>
<style type='text/css'> .tablewrapperEU { position: relative;  box-sizing: border-box; height:72px} .tableEU {display: table; } .rowEU { display: table-row; padding: 1px; } .cellEU { display: table-cell; border: none solid red; padding: 3px;} .cell.empty { border: none; width: 75px; } .cell.rowspanned {  position: absolute; top: 0;  bottom: 0; width: 75px; display: block; margin: 1px;} .contacts{ width: 72px; height: 72px;} .flag { width: 30px; height: 20px; }</style>
<div class="myEUClass" id="divListItemsEU"></div></html>



<script type="text/javascript">


var $eu = jQuery.noConflict(true);


$eu(function () {



    ExecuteOrDelayUntilScriptLoaded(retrieveEUListItems, "sp.js");




});



function retrieveEUListItems() {

    //get the cuurent location context of the page we are on

    var clientContextEU = new SP.ClientContext();

    // get the list/table from the web site where the page is located

    var oList = clientContextEU.get_web().get_lists().getByTitle('WhosWho');

    //

    //create a query to get all list items int he defult view

    var camlQueryEU = new SP.CamlQuery();
    camlQueryEU.set_viewXml("<View><Query>" +
            "<Where><Eq><FieldRef Name=\"ElementContactRegion\"/><Value Type=\"Text\">EU</Value></Eq></Where>" +
        "</Query>"+
        "</View>");
    //create an array of list items

    this.collListItemEU = oList.getItems(camlQueryEU);

    //load the list items into context 

    clientContextEU.load(collListItemEU);

    //execute the query 

    clientContextEU.executeQueryAsync(



    Function.createDelegate(this, this.onQuerySucceeded),



    Function.createDelegate(this, this.onQueryFailed)



    );
clientContextEU.dispose();


}



function onQuerySucceeded(sender, args) {

    // Might be worth starting with this here just to ensure the div is always clear before we start.

    $eu("#divListItemsEU").html('');


    var listEUItemInfoEU = '';


    var listItemEnumeratorEU = collListItemEU.getEnumerator();

    //Iterate results


    while (listItemEnumeratorEU.moveNext()) {

        // get the current looped item

        var oListItemEU = listItemEnumeratorEU.get_current();


        // get the userID from the lookup field

        var w = oListItemEU.get_item('ContactFullName').get_lookupId();
        var x = oListItemEU.get_item('ContactJobTitleFT');
        var y = oListItemEU.get_item('ContactRegion');

        // pass it into the get email method 

        getEUEmail(w,x, y, function(returnedValueEU) {

            //console.log(returnedValue[0])

            $eu("#divListItemsEU").append(



                    returnedValueEU[0]  + 

                    //oListItem.get_item('ElementContactFullName').get_lookupValue() +

                   // ' <strong>JobTitle:</strong> ' + oListItem.get_item('ElementContactJobTitle').get_lookupValue() +


                    '<br />');
});

    }



    // display data

    $eu("#divListItemsEU").html(listEUItemInfoEU);

}



function onQueryFailed(sender, args) {



    alert('Request failed. ' + args.get_message() +



    '\n' + args.get_stackTrace());


}



 function getEUEmail(userId, JT,  flag, callback) {



    var xEU = [];

    var contextEU = new SP.ClientContext();

    var webEU = contextEU.get_web();

    var user = webEU.get_siteUsers().getById(userId);

    contextEU.load(user);



    contextEU.executeQueryAsync(function() {

        //console.log(user.get_email());

        var yEU =   "<div class='tablewrapperEU'>" +
      "<div class='tableEU'>" +
        "<div class='rowEU'>" +
          "<div class='rowspanned cell'>" +
             ' <img class="contacts" src="' + _spPageContextInfo.webServerRelativeUrl + '/_layouts/15/userphoto.aspx?size=M&accountname='+ user.get_email()  +'"/>' +
          "</div>" +
          "<div class='cellEU'>" +
           user.get_title() +
          "</div>" +
        "</div>" +
        "<div class='rowEU'>" +
          "<div class='empty cell'></div>" +
          "<div class='cellEU'>" +
            JT +  
          "<div class='cellEU'>" +
         ' <img class="flag" src="' + window.location.protocol + "//" + window.location.host   + '/SiteAssets/Images/'+ flag  +'.png"/>' +
         //http://staging.intranet.ent.sys.element.com/SiteAssets/Images/EU.png
          "</div>" +
        "</div>" +
        "</div>" +
      "</div>" +
    "</div>"







        xEU.push(yEU);

        callback(xEU);



    }

    , function() {

        console.log("error");

    });
contextEU.dispose();
}

</script>

脚本2 

<script src="/style%20library/javascript/intranet/jquery-1.7.1.min.js"></script>

<style type='text/css'> .tablewrapper { position: relative;  box-sizing: border-box; height:72px} .table {display: table; } .row { display: table-row; padding: 1px; } .cell { display: table-cell; border: none solid red; padding: 3px;} .cell.empty { border: none; width: 75px; } .cell.rowspanned {  position: absolute; top: 0;  bottom: 0; width: 75px; display: block; margin: 1px;} .contacts{ width: 72px; height: 72px;} .flag { width: 30px; height: 20px; }</style>
<div class="myAllClass" id="divListItems"></div>

<script type="text/javascript">

var $sr = jQuery.noConflict(true);


$sr(function () {

    ExecuteOrDelayUntilScriptLoaded(retrieveListItems, "sp.js");

});



function retrieveListItems() {

    //get the cuurent location context of the page we are on

    var clientContext = new SP.ClientContext();

    // get the list/table from the web site where the page is located

    var oList = clientContext.get_web().get_lists().getByTitle('WhosWho');

    //create a query to get all list items int he defult view

    var camlQuery = new SP.CamlQuery();

        camlQuery.set_viewXml("<View><Query><Where><Eq><FieldRef Name=\"ElementContactRegion\"/><Value Type=\"Text\">US</Value></Eq></Where>" +
        "</Query>"+
        "</View>");


    //create an array of list items

    this.collListItem = oList.getItems(camlQuery);

    //load the list items into context 

    clientContext.load(collListItem);


    //execute the query 

    clientContext.executeQueryAsync(



    Function.createDelegate(this, this.onQuerySucceeded),



    Function.createDelegate(this, this.onQueryFailed)



    );

 clientContext.dispose();

}



function onQuerySucceeded(sender, args) {

    // Might be worth starting with this here just to ensure the div is always clear before we start.

    $sr("#divListItems").html('');


    var listItemInfo = '';


    var listItemEnumerator = this.collListItem.getEnumerator();

    //Iterate results


    while (listItemEnumerator.moveNext()) {

        // get the current looped item

        var oListItem = listItemEnumerator.get_current();


        // get the userID from the lookup field

        var t = oListItem.get_item('ContactFullName').get_lookupId();
        var u = oListItem.get_item('ContactJobTitleFT');
        var v = oListItem.get_item('ContactRegion');


        // pass it into the get email method 

        getEmail(t,u, v, function(returnedValue) {

            //console.log(returnedValue[0])

            $sr("#divListItems").append(



                    returnedValue[0]  + 

                    //oListItem.get_item('ElementContactFullName').get_lookupValue() +

                   // ' <strong>JobTitle:</strong> ' + oListItem.get_item('ElementContactJobTitle').get_lookupValue() +


                    '<br />');
});

    }




    // display data

    $sr("#divListItems").html(listItemInfo);


}



function onQueryFailed(sender, args) {



    alert('Request failed. ' + args.get_message() +



    '\n' + args.get_stackTrace());


}



 function getEmail(userId, JT,  flag, callback) {



    var x = [];

    var context = new SP.ClientContext();

    var web = context.get_web();

    var user = web.get_siteUsers().getById(userId);

    context.load(user);



    context.executeQueryAsync(function() {

        //console.log(user.get_email());

        var y =   "<body><div class='tablewrapper'>" +
      "<div class='table'>" +
        "<div class='row'>" +
          "<div class='rowspanned cell'>" +
             ' <img class="contacts" src="' + _spPageContextInfo.webServerRelativeUrl + '/_layouts/15/userphoto.aspx?size=M&accountname='+ user.get_email()  +'"/>' +
          "</div>" +
          "<div class='cell'>" +
           user.get_title() +
          "</div>" +
        "</div>" +
        "<div class='row'>" +
          "<div class='empty cell'></div>" +
          "<div class='cell'>" +
            JT +  
          "<div class='cell'>" +
         '<img class="flag" src="' + window.location.protocol + "//" + window.location.host   + '/SiteAssets/Images/'+ flag  +'.png"/>' +
         //http://staging.intranet.ent.sys.element.com/SiteAssets/Images/EU.png
          "</div>" +
        "</div>" +
        "</div>" +
      "</div>" +
    "</div>"


        x.push(y);

        callback(x);



    }

    , function() {

        console.log("error");

    });
context.dispose();
}

</script>

重申一下，为什么它们不能在SharePoint页面上的单独CEWP中一起运行？

2 个答案:

答案 0 :(得分：0)

您说您更改了div的所有ID，但是是否也更改了代码以匹配更改后的ID？可能就是这样。代码是第二个文件，是指第一个文件中使用的html div的ID。

答案 1 :(得分：0)

在其中一个脚本中更改onQuerySucceeded / fail函数的名称。公平地讲，我确实提前几天尝试了此操作，但显然脚本中的每个地方都没有更改。

示例：




    Function.createDelegate(this, this.onQueryEUSucceeded),



    Function.createDelegate(this, this.onQueryEUFailed)



    );
clientContextEU.dispose();


}



function onQueryEUSucceeded(sender, args) {
相关问题
最新问题