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>
This question is related to
javascript
jquery
ajax
xhtml
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/
<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>
Source: Stackoverflow.com