將Ajax內容加載到隱藏選項卡 - 而不是當前選項卡

Question

我有一個儀表板UI，它使用jQuery選項卡腳本。每個標籤通過單獨的Ajax請求加載其內容。

這裏是我遇到的問題：

1. 的用戶將打開多個標籤頁，其他
2. 每個選項卡中創建和Ajax請求後，一個適合每個
3. 最後由要創建的選項卡當前處於打開狀態，並且一旦請求完成，每個選項卡的內容就會顯示在此選項卡上
4. 一旦用戶單擊任何選項卡，內容就會按照它的設置進行設置。

基本上，如果用戶打開一個新標籤提前最近的選項卡的Ajax請求完成，兩者的Ajax請求的內容而當前打開的選項卡上顯示，直到用戶點擊任何選項卡，然後一切都顯示爲它應該是。

我已經嘗試將Ajax調用設置爲async: false，它解決了這個問題，因爲它迫使ajax請求在當前選項卡上完成並加載，然後允許用戶打開另一個選項卡，但用戶反饋一直是負面的用戶認爲儀表板凍結（它具有）。

我還設置了一個超時函數來加載帶有加載.gif的選項卡，然後發出async: false Ajax請求。用戶反饋相同，即使加載gif的超時函數一旦發出Ajax請求就會停止它的動畫。

Ajax請求如下：

$.ajax ({ 
     url: report, 
     cache: false, 
     success: function(html) { 
      $("#loading").hide(); 
      $("#tabcontent").append('<div id="c'+count+'" class="tabContentContainer">'+html+'</div>'); 
     }, 
     error: function(x, status, error) { 
      $.ajax ({ 
       url: 'admin/error_notification.php', 
       type: "POST", 
       data:{ 
        error: error 
       } 
      }); 
     }, 
     async:true 
}); 

Answer 1

我想，如果我在Ajax請求之前創建tabContentContainer div，那麼當另一個選項卡打開時，選項卡有一個對象然後隱藏。然後，一旦Ajax響應被加載，它的可見性已經被設置。見下：

$("#tabcontent").append('<div id="c'+count+'" class="tabContentContainer"></div>'); 

$.ajax ({ 
     url: report, 
     cache: false, 
     success: function(html) { 
      $("#loading").hide(); 
      $("#c"+count+"").html(''+html+''); 
     }, 
     error: function(x, status, error) { 
      $("#tabcontent").append('<div id="c'+count+'" class="tabContentContainer"><div class="alert alert-error" style="margin-top:70px;"><button type="button" class="close" data-dismiss="alert">&times;</button><strong>Don\'t worry… It\'s not you, it\'s us.</strong> We were unable to connect to your data and deliver results. We are looking into this now.</div></div>'); 
      $.ajax ({ 
       url: 'admin/error_notification.php', 
       type: "POST", 
       data:{ 
        error: error 
       } 
      }); 
     }, 
     async:true 
}); 

Answer 2

跟蹤的最後一個請求以某種方式和創建另一個請求時，放棄它：

var jqxhr = {abort: function() {}}; 
/* various other code */ 
function loadTabOrWhatever() { 
    jqxhr.abort(); 
    jqxhr = $.ajax({ 
     /* ajax call in your question */ 

Answer 3

我建議有一個單獨與每個選項卡（不僅僅是一個#tabcontent div）配對的tabcontent div，並在切換選項卡時顯示/隱藏這些選項。然後，如果之前的ajax調用稍後回來，並填充現在隱藏的tabcontent div，則不會造成任何損害。

function loadTab(tabName) { 
    // Hide all tab content panes, then just show the one we want 
    $(".tab-pane").hide(); 
    $("#tab-" + tabName).show(); 
    $.ajax ({ 
     ... 
     success: function(html) { 
      $("#loading").hide(); 
      $("#tab-" + tabName).append('<div id="c'+count+'" class="tabContentContainer">'+html+'</div>'); 
    <snip> 

創建內容窗格狀：

<div class="tab-pane" id="tab-firsttab"></div> 

，並觸發鏈接將沿着線的東西：

<a href="#" onClick="loadTab('firsttab')">First Tab</a> 

我相信這將使其無害然後用戶迅速點擊多個標籤，發射多個ajax調用，因爲每個ajax調用只會將內容加載到它自己的內容窗格中。

Answer 4

我有這樣的設置。你可以調用下面的函數來指示你正在加載什麼標籤。我確保每個新選項卡都有一個唯一的ID（UUID），並且該函數獲取該ID來加載頁面。

但是，我發現如果加載的子頁面包含JavaScript代碼，那麼需要在頁面內部初始化對象， 他們可能會被頁面隱藏的事實弄糊塗。有時當我回到帶有這些元素的標籤時，我會發現它們的尺寸很小。

此功能還存儲提交到後端的數據，以便您輕鬆創建「重新加載」按鈕。

function LoadView(ident, view, data) { 
 

 
\t var img = $('<img>', { 
 
\t \t src : '/images/ajax-loading.gif' 
 
\t }); 
 

 
\t $('#' + ident).html(img); 
 

 
\t data.view = view; 
 
\t data.viewid = ident; 
 

 
\t // console.log(data); 
 
\t $.ajax({ 
 
\t \t url : '/cgi-bin/browser.cgi', 
 
\t \t data : data, 
 
\t \t type : 'GET', 
 
\t \t dataType : 'html', 
 
\t \t timeout : 30000000, 
 
\t \t success : function(result) { 
 
\t \t \t $("#" + ident).html(result); 
 
\t \t \t // set data on view 
 
\t \t \t $("#" + ident).data('data', data); 
 
\t \t }, 
 
\t \t error : function(xhr, status, error) { 
 
\t \t \t var img = $('<img>', { 
 
\t \t \t \t src : '/images/exclamation_micro.png' 
 
\t \t \t }); 
 
\t \t \t $('#' + ident).html(img.html() + error); 
 
\t \t \t // alert("Error processing request " + error); 
 
\t \t }, 
 
\t \t timeout : function() { 
 
\t \t \t var img = $('<img>', { 
 
\t \t \t \t src : '/images/exclamation_micro.png' 
 
\t \t \t }); 
 
\t \t \t $('#' + ident).html(img.html() + ' Timeout'); 
 
\t \t \t // alert("Timeout processing request"); 
 
\t \t } 
 
\t }); 
 
} 
 

 
function ReloadView(view, ident) { 
 
    // Retrieve the data for the view 
 
    var data = $('#' + ident).data('data'); 
 
    // Reload the view 
 
    LoadView(ident, data.view, data); 
 
}