Question

我正在使用jQuery Tabs通过AJAX动态加载某些计算的结果。它工作正常，除了第一个（默认）选项卡没有命中服务器的结果...它缓存来自最后一组计算的第一个选项卡的数据，如果这是第一次运行，则为空白。如何强制它从服务器加载默认选项卡？

更多细节：我有一个jQuery对话框，它基本上在服务器进行计算时显示加载GIF。当结果作为JSON对象返回时，它会检查计算是否成功，如果是，则关闭加载对话框并打开结果对话框。第一个选项卡要么具有上次计算的旧结果，要么在对话框打开时第一次运行时为空白...我知道它没有在第一个选项卡上点击服务器，因为Firefox中的“Net”选项卡没有显示弹出对话框时的任何活动，但如果我更改标签然后再返回第一个，则AJAX请求将显示在网络活动中。我正在使用Tomcat作为服务器，如果这很重要的话。

以下是代码。谢谢你的帮助！

使用Javascript：

$(document).ready(function () {
    $("#loading-dialog").dialog({
        autoOpen: false,
        modal: true,
        open: function() {
           $.post("run", {
             var1: whatever, ...
           }).done(function(res) {
                if( parseInt(res.status) === 0 ) {
                   $("#loading-dialog").dialog("close");
                   $("#results-dialog").dialog("open");
                } else {
                   alert(res.msg);
                }
            }).fail(function(xhr, textStatus, errorThrown) {
                alert('Error: '+xhr.responseText);
            })
         }
    })
    $("#results-dialog").dialog({
        autoOpen: false,
        width: 750,
            open: function () {
                $("#results-tab").tabs("load", 1); // try to force reloading first tab... doesn't work
            },
        buttons: {
            "OK": function() {
                $(this).dialog('close');
            }
        }
    });
    $( "#results-tabs" ).tabs({
        beforeLoad: function( event, ui ) {
            ui.jqXHR.error(function() {
            ui.panel.html("Results go here.");
        });
        }
    });
});

相关的HTML位：

<div id="loading-dialog">
      <center>Please wait, running model.
      <img src="${pageContext.request.contextPath}/images/loading.gif"></center>
</div>
<div id="results-dialog">
    <div id="results-tabs">
        <ul>
            <li><a href="result?type=one">Tab 1</a></li>
            <li><a href="result?type=two">Tab 2</a></li>
            <li><a href="result?type=three">Tab 3</a></li>
            <li><a href="result?type=four">Tab 4</a></li>
            <li><a href="result?type=five">Tab 5</a></li>
            <li><a href="result?type=six">Tab 6</a></li>
        </ul>
    </div>
</div>

Answer 1

加载第一个标签时，您的ID错误（缺少s），并且jquery标签为零索引，因此以下内容应该有效：

$("#results-dialog").dialog({
       autoOpen: false,
       width: 750,
       open: function () {
            $("#results-tabs").tabs("load", 0); // try to force reloading first tab... doesn't work
        },
       buttons: {
           "OK": function() {
              $(this).dialog('close');
          }
     }
 });

jQuery UI AJAX选项卡 - 第一个选项卡无法加载

1 个答案: