How to refresh table contents in div using jquery/ajax

Question

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 1

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>

Answer 2

use this code

$(".table").load(location.href + " .table");

don't forget to give space before .table Ex: $(".table").load(location.href + "SPACE.table")