如何使用ajax刷新刷新div？

Question

我正在開發spring mvc controller項目，我將數據從控制器傳遞給jsp。 我的jsp頁面有水平標簽設計，點擊每個標簽后，我正在顯示表格。

目前我的設計中只有兩個標簽。 單擊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 。
• 此外，如果我在TEST1選項卡上，然后刷新正在進行，那么它應該在TEST1選項卡上，但假設我在TEST2選項卡上，然后刷新正在發生，那么它應該在TEST2選項卡上。

下面是我提出的jquery只是為了tab1刷新不知道我如何將它用於tab2 ，但不知何故刷新之后，我仍然看到舊數據並且它在刷新后沒有顯示最新數據。

$(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始終保持相同的舊數據，我看到第一次擊中網址..我的jquery有什么問題嗎？

另外我注意到一件事很奇怪，如果我刪除content div and tab1 div並且只刷新container div然后我能夠在刷新后看到我的更新數據並且它工作正常但是如果我添加content and tab1 div並嘗試刷新container div ，然后它根本不起作用。 所以有些事情是肯定的。

我懷疑這種情況正在發生，因為我的CSS問題，我想這是在jsfiddle中顯示的。

任何人都可以幫我嗎？

Answer 1

首先，當你試圖獲取test4.html時，它在ajax上給出404錯誤，所以我使用test（jsfiddle默認的ajax模型）。 我可以在tab1上看到更新，關於tab2，如果你在ajax成功中替換“＃tab1”中的內容，它將不會更新tab2內容。

第二個donot使用replaceWith（）這將替換完整元素所以下次沒有div元素id =“tab1”..而是使用這個..

        if( $("#tabs li:first").attr("id") ==="current"){
        $('#tab1').html("dummy content 1");
        }
        else { $('#tab2').html("dummy content 2"); } 

小提琴演示