CODEWITHSUNDEEP
javascriptjqueryajaxjsp
Nils Sjöberg
Nils Sjöberg

Reputation: 1

refresh only one div

I've a webapp using hibernate to mysql. The webapp works fine, if my database gets new values they appear instantly on the webapp after refresh of the page. I want to get away from my "refresh-the-whole-page-every-five-seconds" build and have a checkbox that when activated the list in tbody will refresh alone. I've tried autorefresh on the div as well, but yeah, if anyone of you guys know this please help! thank you!

Code block 1 (head):

<script type="text/javascript">
function auto(){setInterval(
function () { $('#doRefresh'). ????

;}, 2000);  } </script>

Code block 2 (div 1):

<input type='button' value='UPDATE' class="btn" onclick="auto()"/>

Code block 3 (div 2):

<tbody id="doRefresh">
        <c:forEach var="sensor" items="${listSensors}" varStatus="status">
            <tr class="listData">
                <td>${sensor.fileName}</td>
                <td>${sensor.date}</td>
                <td>${sensor.time}</td>
                <td>${sensor.channel1}</td>
                <td>${sensor.channel2}</td>
                <td>${sensor.channel3}</td>
                <td>${sensor.channel4}</td>
                <td>${sensor.channel5}</td>
                <td>${sensor.channel6}</td>
                <td>${sensor.channel7}</td>
                <td>${sensor.channel8}</td>               
            </tr>
        </c:forEach>    
    </tbody>

I have been to the following pages for inspiration (and more):

1. https://wowjava.wordpress.com/2010/02/06/auto-refreshing-the-content-
without-reloading-page-using-jquery/
2. http://www.sitepoint.com/auto-refresh-div-content-jquery-ajax/
3. http://crunchify.com/how-to-refresh-div-content-without-reloading-page-
using-jquery-and-ajax/
4. http://stackoverflow.com/questions/5987802/refreshing-only-one-div-in-
page-with-just-regular-javascript

Thank you

Upvotes: 0

Views: 1631

Answers (1)

charlietfl
charlietfl

Reputation: 171679

Since you already have server code that can be used to generate the html you can use the simplest jQuery ajax method which is load().

Method replaces all the html within the selector with new html from server by simply passing in a url.

/* within interval function */
 $('#doRefresh').load('path/to/server/script', function(){
     /* new html has been inserted, can run any html related code here*/
 });

Since the <tbody> doesn't get replaced, only the rows, just send back rows. Otherwise use $('#doRefresh').parent().load(... to keep <tbody>

Reference: load() Docs

Upvotes: 1

Related Questions