99maas 99maas - 1 month ago 9
Javascript Question

How to refresh table contents in div using jquery/ajax

I need your help in order to refresh a div

id="mytable"
in my html once the function is called from a method. Currently, I am loading the full page once it is called using the below lines.

In my java method, I am using the below line to call a javascript method:

RequestContext.getCurrentInstance().execute("autoRefresh()");


The html code :

<script type="text/javascript">
function autoRefresh() {
window.location.reload();
}
</script>

<div id='mytable'>
<h1 id='My Table'>
<table></table>
</h1>
</div>

Answer

You can load HTML page partial, in your case is everything inside div#mytable.

setTimeout(function(){
   $( "#mytable" ).load( "your-current-page.html #mytable" );
}, 2000); //refresh every 2 seconds

more information read this http://api.jquery.com/load/

Update Code (if you don't want it auto-refresh)

<button id="refresh-btn">Refresh Table</button>

<script>
$(document).ready(function() {

   function RefreshTable() {
       $( "#mytable" ).load( "your-current-page.html #mytable" );
   }

   $("#refresh-btn").on("click", RefreshTable);

   // OR CAN THIS WAY
   //
   // $("#refresh-btn").on("click", function() {
   //    $( "#mytable" ).load( "your-current-page.html #mytable" );
   // });


});
</script>