不能掩蓋其動態添加我的web應用程序

Question

我在一個asp.net web應用程序的工作中一個Ajax加載圖像，和裏面我試圖做到以下幾點： -

1. 呼叫2休息API
2. 顯示一個Ajax加載圖像
3. 構建結果
4. 隱藏加載圖像

這裏的名單是我的代碼： -

<script type="text/javascript"> 
var htmlinit = ""; 
htmlinit = "<image id= 'customloader' src= '/resources/ajax-loader.gif'></image>"; 
$(".ms-core-listMenu-root>li:contains('Projects')").before(htmlinit); 
$(function() { 
function getAssetsListItems(){ 

    var results=""; 
    var url = "/_api/web/lists/getbytitle('Projects')/items?$filter=SiteAutomaticallyCreated eq 'Yes'&$select=ID,Title,ProgrammeRevissionId&$orderby= Title asc"; 
    $.ajax({ 
    url: url, 
    method: "GET", 
    async: false, 
    headers: { "Accept": "application/json; odata=verbose" }, 
    success: function (data) { 
     if(data.d.results.length>0){ 
      results = data.d.results; 

     } 
    }, 
    error: function (data) {  
    } 
    }); 
    return results; 
} 

    var assets=getAssetsListItems();  
    var url = "/_api/web/lists/getbytitle('Programme or Version Release')/items?$select=ID,Title&$orderby= Title asc"; 
    var html=""; 
    $.ajax({ 
    url: url, 
    method: "GET", 
    headers: { "Accept": "application/json; odata=verbose" }, 
    success: function (data) { 
     if(data.d.results.length>0){ 

      var items=data.d.results; 
      for(var i=0;i<items.length;i++){ 
       html+="<li class='static'>" 
       +"<span tabindex='0' class='static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode'>" 
       +"<span class='additional-background ms-navedit-flyoutArrow'><span class='menu-item-text' style='color:#00AEEF;font-weight:bold'>" 
       +items[i].Title+"</span></span></span>"; 
       html+="<ul class='static'>"; 

       for(var j=0;j<assets.length;j++){ 

        if(assets[j].ProgrammeRevissionId==items[i].ID){ 
        var idd = assets[j].ID.toString(); 
        var ntitle = assets[j].Title; 
         html+="<li class='static'>" 
          +"<a tabindex='0' class='static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode'" 
          +"href=/businessfunctions/PMO/Projects/"+idd+">"; 
        } 
       }    
       html+="</ul></li>"; 
      } 
      $(".ms-core-listMenu-root>li:contains('Projects')").after(html); 
      $("#customloader").hide(); 
     } 
    }, 
    error: function (data) {  
    } 
    }); 
}); 

</script> 

我面臨的問題是加載圖像不會被隱藏。所以這行代碼： -

$("#customloader").hide(); 

不按預期工作，雖然我會得到我的HTML結果創建正確。所以目前裝載圖像會顯示出來，那麼結果將呈現，但加載圖像將保持裝載在屏幕上...

感謝

Answer 1

我覺得你應該改變，以讓幾件事情你至少代碼更可讀。

首先是把所有的代碼$(function() { });

裏面那麼這部分改變

var htmlinit = ""; 
htmlinit = "<image id= 'customloader' src= '/resources/ajax-loader.gif'></image>"; 
$(".ms-core-listMenu-root>li:contains('Projects')").before(htmlinit); 

到

var htmlinit = $("<image id='customloader' src='/resources/ajax-loader.gif'></image>"); 
$(".ms-core-listMenu-root>li:contains('Projects')").before(htmlinit); 

這樣做了以後，我的建議是把第二AJAX調用內部的函數，例如getTitles。

現在隨着代碼的到位，您可以修復其他兩點。

我不確定，但我認爲getAssetsListItems從不返回信息，這是進行AJAX調用時常見的錯誤。

AJAX是一個異步調用，因此getAssetsListItems函數結束時的返回將在AJAX調用完成之前發生。

要解決這個問題，你應該把getTitle函數放在AJAX調用的成功之內。

的第二件事是改線$("#customloader").hide();到htmlinit.hide();

我認爲這會幫助你達到你的目標。

這是所有更改後的完整代碼。

<script type="text/javascript"> 
$(function() { 
    var htmlinit = $("<image id='customloader' src='/resources/ajax-loader.gif'></image>"); 
    $(".ms-core-listMenu-root>li:contains('Projects')").before(htmlinit); 

    getAssetsListItems(); 

    function getAssetsListItems(){ 
     var url = "/_api/web/lists/getbytitle('Projects')/items?$filter=SiteAutomaticallyCreated eq 'Yes'&$select=ID,Title,ProgrammeRevissionId&$orderby= Title asc"; 
     $.ajax({ 
      url: url, 
      method: "GET", 
      async: false, 
      headers: { "Accept": "application/json; odata=verbose" }, 
      success: function (data) { 
       if(data.d.results.length > 0){ 
        getTitles(data.d.results); 
       } 
      }, 
      error: function (data) {  
      } 
     }); 
    } 

    function getTitles(assets){ 
     var url = "/_api/web/lists/getbytitle('Programme or Version Release')/items?$select=ID,Title&$orderby=Title asc"; 

     $.ajax({ 
      url: url, 
      method: "GET", 
      headers: { "Accept": "application/json; odata=verbose" }, 
      success: function (data) { 
       if(data.d.results.length>0){ 

        var html=""; 
        var items=data.d.results; 

        for(var i=0;i<items.length;i++){ 
         html+="<li class='static'>" 
          +"<span tabindex='0' class='static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode'>" 
          +"<span class='additional-background ms-navedit-flyoutArrow'><span class='menu-item-text' style='color:#00AEEF;font-weight:bold'>" 
          +items[i].Title+"</span></span></span>"; 

         html+="<ul class='static'>"; 

         for(var j=0;j<assets.length;j++){ 

          if(assets[j].ProgrammeRevissionId==items[i].ID){ 
           var idd = assets[j].ID.toString(); 
           var ntitle = assets[j].Title; 
           html+="<li class='static'>" 
            +"<a tabindex='0' class='static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode'" 
            +"href=/businessfunctions/PMO/Projects/"+idd+">"; 
          } 
         } 

         html+="</ul></li>"; 
        } 

        $(".ms-core-listMenu-root>li:contains('Projects')").after(html); 
        htmlinit.hide(); 
       } 
      }, 
      error: function (data) {  
      } 
     }); 
    } 
}); 

</script> 

問候