将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); 
 
}