Нужна помощь в перемещении кода, который непосредственно кодирован на странице, в ресурсы моего сайта, чтобы разрешить параметры и повторное использование

Question

Я пытаюсь переместить некоторый код, встроенный на странице, в ресурсы своего сайта, чтобы позволить мне повторно использовать этот код, передавая параметры вместо дублирования одного и того же кода на нескольких страницах.

Iмой сценарий работает, когда я помещаю его непосредственно в редактор сценариев.Сейчас я пытаюсь разместить его в активах своего сайта и ссылаться на него из редактора сценариев.Я не могу заставить его работать сейчас.

Приведенный ниже код отлично работает при прямой вставке на мою страницу в редакторе скриптов.

<script type="text/javascript">
$(function () {
    //set section text and field name
    AddSectionBeforeField("Phase Section","Phase");

});
function AddSectionBeforeField(sectionText,fieldName){
    var $fieldTR=$(".ms-standardheader nobr:contains('"+fieldName+"')").closest("tr");
    $fieldTR.before("<tr style='background-color:white'><td colspan='2' class='ms-formbody' style='padding:0; color: #96c03d;'><div style='font-size:22px;margin-top: 10px;margin-bottom: 10px;font-family: Oswald';'>"+sectionText+"</div></td></tr>");
}

function changeButtonStyle()
{ 
    var inputs = document.getElementsByTagName("input");  

alert('aa');
    for(i = 0; i<inputs.length; i++)  
    {   
       if(inputs[i].type == "button" && inputs[i].value == "Save")
       {
          inputs[i].style.backgroundColor='#96C03D'; 
          inputs[i].style.color ='white';   
          inputs[i].style.width= "160px";
          inputs[i].style.height = "40px";
          inputs[i].style.fontSize = "16px";
       }
        if(inputs[i].type == "button" && inputs[i].value == "Cancel")
       {
          inputs[i].style.backgroundColor='#96C03D'; 
          inputs[i].style.color ='white';   
          inputs[i].style.width= "160px";
          inputs[i].style.height = "40px";
          inputs[i].style.fontSize = "16px";
       }           
      }  
}
_spBodyOnLoadFunctionNames.push("changeButtonStyle");
</script>

Затем я изменяю свой редактор скриптов, чтобы он содержал следующее

<script type="text/javascript" src="../SiteAssets/js-test/EditChanges.js"></script>

, и в моей библиотеке ресурсов мой EditChanges.js содержит следующий код: (тот же код, за исключением тегов.

$(function () {
    //set section text and field name
    AddSectionBeforeField("Phase Section","Phase");

});
function AddSectionBeforeField(sectionText,fieldName){
    var $fieldTR=$(".ms-standardheader nobr:contains('"+fieldName+"')").closest("tr");
    $fieldTR.before("<tr style='background-color:white'><td colspan='2' class='ms-formbody' style='padding:0; color: #96c03d;'><div style='font-size:22px;margin-top: 10px;margin-bottom: 10px;font-family: Oswald';'>"+sectionText+"</div></td></tr>");
}

function changeButtonStyle()
{ 
    var inputs = document.getElementsByTagName("input");  

    for(i = 0; i<inputs.length; i++)  
    {   
       if(inputs[i].type == "button" && inputs[i].value == "Save")
       {
          inputs[i].style.backgroundColor='#96C03D'; 
          inputs[i].style.color ='white';   
          inputs[i].style.width= "160px";
          inputs[i].style.height = "40px";
          inputs[i].style.fontSize = "16px";
       }
        if(inputs[i].type == "button" && inputs[i].value == "Cancel")
       {
          inputs[i].style.backgroundColor='#96C03D'; 
          inputs[i].style.color ='white';   
          inputs[i].style.width= "160px";
          inputs[i].style.height = "40px";
          inputs[i].style.fontSize = "16px";
       }           
      }  
}
_spBodyOnLoadFunctionNames.push("changeButtonStyle");

Я ожидаю, что заголовок будетнаходится над полем фазы.

Answer 1

После некоторого тестирования и дополнительного наблюдения.Ссылки на любые сценарии относятся к тому, где находится страница в URL.Для страницы сайта ссылка на SiteAssets - ../SiteAssets.Ссылка на страницу списка: ../../SiteAssets.Довольно просто, если вы действительно думаете об этом.Извините, что потратил время людей, но я об этом не знал.

Answer 2

Не совсем ответ на вашу проблему, но потребовалось много кода для комментария.

Простое правило CSS может позволить вам избежать циклического поиска, чтобы найтикнопки для применения стилей.

button[value="Cancel"],
button[value="Save"] {
  background-color: #96C03D;
  color: white;
  width: 160px;
  height: 40px;
  font-size: 16px;
}

<button>Test</button>
<button value="Save">Save</button>
<button value="Cancel">Cancel</button>