Question

我有一个使用jQuery标签脚本的仪表板UI。每个选项卡都通过单独的Ajax请求加载其内容。

以下是我遇到的问题：

用户将打开多个标签，一个接着另一个
创建每个选项卡，并为每个
要创建的最后一个标签目前已打开，请求完成后，每个标签的内容都会显示在此标签上
用户点击任何标签后，内容就会按原样设置。

基本上，如果用户在最近选项卡的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

以某种方式跟踪上一个请求，并在创建另一个请求时中止它：

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

Answer 2

我建议使用单独的 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 3

我发现如果我在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 4

我有这样的设置。您可以调用下面的功能，指出您要加载的标签。我确保每个新选项卡都有一个唯一的ID（UUID），并且该函数获取该ID以加载页面。

但是有一个障碍 - 我发现如果加载的子页面包含javascript代码，那么需要在页面内部初始化对象，他们可能会因为页面被隐藏而感到困惑。有时候我回到带有这些元素的标签，我会发现他们有一个小的＆＃39;尺寸。

此功能还可以存储提交给后端的数据，以便您轻松创建“重新加载”数据。按钮。

＆＃13;

{{1}}

＆＃13;

将Ajax内容加载到隐藏选项卡 - 而不是当前选项卡

4 个答案: