How to refresh div using ajax refresh?

Question

I am working on spring mvc controller project in which I am passing data from controller to jsp. And my jsp page has Horizontal tabbed design and after clicking on each tab, I am showing tables.

Currently I have only two tab in my design. As soon as I click TEST1 tab, it shows Table1 but if I click TEST2 tab, it shows another table having different columns and data which is Table2 and it works fine.

Here is my jsfiddle.

And here is my test4.jsp design -

<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>

I am passing data from controller to jsp page. Now what I would like to do is -

• I would like to refresh both of my tabs which are tab1 div and tab2 div every 30 seconds using AJAX refresh.
• Also, if I am on TEST1 tab, and then the refresh is happening, then it should be on TEST1 tab but suppose if I am on TEST2 tab, and then the refresh is happening, then it should be on TEST2 tab.

Below is the jquery I came up with just for tab1 refresh not sure how would I use it for tab2 as well but somehow after refresh, I am still seeing the old data and it's not showing the latest data after refresh.

$(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();
        }
    });
}

I am not able to see that my tab1 div is getting refreshed at all. I can see refresh image showing up but somehow tab1 always hold same old data which I see hitting the url for the first time.. Is there something wrong in my jquery?

Also I have noticed one thing which is pretty strange, if I remove content div and tab1 div and just refresh container div then I am able to see my updated data after refresh and it works fine but if I add content and tab1 div and try to refresh container div, then it doesn't work at all. So something is wrong for sure..

I am suspecting this is happening because of my css issue I guess which is shown in jsfiddle.

Can anybody help me with this?

Answer 1

First as u trying to fetch test4.html which is giving 404 error on ajax so i use test (jsfiddle default ajax mockup). I can see the update on tab1,, about tab2 if u replacing content in "#tab1" at ajax success it will not update tab2 content.

Second donot use replaceWith() this will replace the full element so next time there will be no div element with id="tab1".. instead use this..

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

Fiddle DEMO