如何使用 ajax refresh 刷新水平选项卡式设计中的选项卡？

Question

我正在从事一个 Web 开发项目，在该项目中我设计了水平选项卡式设计，然后单击每个选项卡后，我正在显示表格。

目前我的设计中只有两个标签。当我点击TEST1 标签时，它会显示Table1，但如果我点击TEST2 标签，它会显示另一个具有不同列和数据的表格Table2，它工作正常。

这是我的jsfiddle。

这是我的 test4.jsp 设计 -

<div id='headerDivDash'>
    <h1 id='topHeaderDash'>
        some_image
    </h1>
</div>

<ul id="tabs">
    <li><a href="#" name="tab1">TEST1</a></li>
    <li><a href="#" name="tab2">TEST2</a></li>
</ul>

<div id="content"> 
    <div id="tab1">
            <h2>Test 1</h2>
        <div class="container">
            <c:forEach var="e" items="${testing.machines}">
                <div class="component">
                    <h3>
                        For
                        <c:out value="${e.key}" />
                    </h3>
                    <table class="overflow-y">
                        <thead>
                            <tr>
                                <th>First Name</th>
                                <th>Last Name</th>
                                <th>Address</th>
                                <th>Email</th>
                            </tr>
                        </thead>
                        <tbody>
                            <c:forEach var="m" items="${e.value}">
                                <tr>
                                    <th>${m.fName}</th>
                                    <td class="color-changer">${m.lName}</td>
                                    <td>${m.address}</td>
                                    <td>${m.email}</td>
                                </tr>
                            </c:forEach>
                        </tbody>
                    </table>
                </div>
            </c:forEach>
        </div>

    </div>
    <div id="tab2">
            <h2>Test 2</h2>

        <div class="container">
            <c:forEach var="e" items="${testing.machines}">
                <div class="component">
                    <h3>
                        For
                        <c:out value="${e.key}" />
                    </h3>
                    <table class="overflow-y">
                        <thead>
                            <tr>
                                <th>First Name</th>
                                <th>Last Name</th>
                                <th>Address</th>
                                <th>Email</th>
                            </tr>
                        </thead>
                        <tbody>
                            <c:forEach var="m" items="${e.value}">
                                <tr>
                                    <th>${m.fName}</th>
                                    <td class="color-changer">${m.lName}</td>
                                    <td>${m.address}</td>
                                    <td>${m.email}</td>
                                </tr>
                            </c:forEach>
                        </tbody>
                    </table>
                </div>
            </c:forEach>
        </div> 
    </div>
</div>
<div class="footer">&copy Some value</div>

我正在将数据从控制器传递到 jsp 页面。现在我想做的是-

• 我想使用 AJAX 刷新每 30 秒刷新一次 tab1 div 和 tab2 div 两个选项卡。最初，在任何刷新之前，我想将我的背景变灰，然后显示刷新图像。刷新完成后，该刷新图像将消失，两个 div tab1 div 和 tab2 div 应该会被刷新。
• 另外，如果我在TEST1 选项卡上，然后正在刷新，那么它应该在TEST1 选项卡上，但假设我在TEST2 选项卡上，然后正在刷新，那么它应该在TEST2 标签上。

我已经尝试按照我的 jsfiddle 和下面的 jquery 所示进行编码，我编写的代码只尝试刷新 tab1 div 但不知何故 tab1 div 没有反映最新数据。它总是显示我第一次点击 url 时看到的旧数据。而且我不确定我在那里做错了什么？

$(document).ready(function(){
    // Create overlay and append to body:
    $('<div id="overlay"/>').css({
        position: 'fixed',
        top: 0,
        left: 0,
        width: '100%',
        height: $(window).height() + 'px',
        opacity:0.4, 
        background: 'lightgray url(http://bradsknutson.com/wp-content/uploads/2013/04/page-loader.gif) no-repeat center'
    }).hide().appendTo('body');

    // Execute refresh with interval:
    setInterval(refresh, 30 * 1000);
});

//Create a refresh function:
function refresh(){
    // SHOW overlay
    $('#overlay').show();
    // Retrieve data:
    $.ajax({
        url: 'test4.jsp',
        type: 'GET',
        success: function(data){
            var content =  $($.parseHTML(data)).filter("#tab1");
            //Replace content inside the div
            $('#tab1').replaceWith(content); # this is not updating my tab div with latest data
            // HIDE the overlay:
            $('#overlay').hide();
        }
    });
}

我根本看不到我的tab1 div 正在刷新。我可以看到刷新图像显示，但不知何故 tab1 总是保存我第一次看到点击 url 的旧数据。我的 jquery 有什么问题吗？

还有如何为我的两个标签添加刷新？

更新：-

我注意到一件很奇怪的事情，如果我删除 content div and tab1 div 并刷新 container div 然后我可以在刷新后看到我更新的数据并且它工作正常但是如果我添加 content and tab1 div 并尝试刷新container div，那么它根本不起作用。所以肯定有问题..

Answer 1

您需要等到收到数据。但如果你的计时器足够长，这应该没关系。

所以，请把你的代码改成这样：

$(document).ready(function(){
    // Create overlay and append to body:
    $('<div id="overlay"/>').css({
        position: 'fixed',
        top: 0,
        left: 0,
        width: '100%',
        height: $(window).height() + 'px',
        opacity:0.4, 
        background: 'lightgray url(http://bradsknutson.com/wp-content/uploads/2013/04/page-loader.gif) no-repeat center'
    }).hide().appendTo('body');

    // Execute refresh with interval:
    refresh();
});

//Create a refresh function:
function refresh(){
    // SHOW overlay
    $('#overlay').show();
    // Retrieve data:
    $.ajax({
        url: 'test4.html',
        type: 'GET',
        success: function(data){
            var content =  $($.parseHTML(data)).filter("#tab1");
            //Replace content inside the div
            $('#tab1').replaceWith(content); # this is not updating my tab div with latest data
            // HIDE the overlay:
            $('#overlay').hide();
            setTimeout(refresh, 30 * 1000);
        }
    });
}

如果这不能替换您的数据，只需 替换此行：

var content =  $($.parseHTML(data)).filter("#tab1");
//Replace content inside the div
$('#tab1').replaceWith(content); # this is not updating my tab div with latest data
// HIDE the overlay:
$('#overlay').hide();
setTimeout(refresh, 30 * 1000);

有了这个：

$('#tab1').html(data);
$('#overlay').hide();
setTimeout(refresh, 30 * 1000);

Answer 2

根据要求，您可以尝试将 ajax 请求替换为以下等效项：

//Create a refresh function:
function refresh(){
    // SHOW overlay
    $('#overlay').show();
    $('#tab1').load('test4.jsp #tab1', function(){
        // HIDE the overlay:
        $('#overlay').hide();
    });
}