запустить 2 одинаковых javascripts на той же странице

У меня есть 2 файла js в каталоге ресурсов сайта на SPS2013. Код в каждом подобен. Мне нужно использовать каждый сценарий на одной странице SharePoint в 2 веб-частях редактора контента (CEWP). Я прочитал в этой теме «запуск 2 одинаковых javascripts на той же странице», что изменение имен методов решает эту проблему, однако мне не удалось этого сделать. Каждый сценарий выполняется должным образом, когда на странице есть только один CEWP, а когда я добавляю другой, результаты обоих будут в итоге в одном CEWP.

Я переименовал все методы и идентификатор DIV, на который я выводил данные. Я не получаю никаких ошибок в консоли. Я бы подумал, что каждый скрипт, работающий внутри тега, поможет, но не повезло. Я не уверен, изм ли это изм 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() +



    '
' + 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() +



    '
' + 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>

Чтобы повторить, почему они не работают вместе в отдельных CEWP на странице SharePoint?

Всего 2 ответа


Вы сказали, что изменили все идентификаторы div, но изменили ли вы код также, чтобы соответствовать измененным идентификаторам? Вероятно, в этом-то и проблема ... код второго файла ссылается на идентификаторы HTML-дивов, используемых в первом.


Измените имя функции onQuerySucceeded / fail в одном из сценариев. Чтобы быть справедливым, я попробовал это за несколько дней до этого, но я, очевидно, не изменился везде в сценарии.

Пример:




    Function.createDelegate(this, this.onQueryEUSucceeded),



    Function.createDelegate(this, this.onQueryEUFailed)



    );
clientContextEU.dispose();


}



function onQueryEUSucceeded(sender, args) {

Есть идеи?

10000