How can I refresh my page every second using Ajax in MVC? - ajax

Question

I want to create a mechanism in my page such that it refreshes the table data everysecond using Ajax. How can I do that?

Answer 1

Assuming that you have a controller action that will return the table as a partial view you can use:
<script type="text/javascript">
$(function() {
setInterval(loadTable,1000); // invoke load every second
loadTable(); // load on initial page loaded
});
function loadTable() {
$('#tablecontainer').load( '/controller/tabledata' );
}
</script>
<div id="tablecontainer">
</div>
You'd have your tabledata action return a partial view containing the table.
<table>
<thead>...</thead>
<tbody>...</tbody>
</table>
EDIT to establish via a click handler (script tags omitted)
$(function() {
var timer;
$('#enableCheckbox').change( function() {
if ($(this).find(':checked').length) {
timer = setInterval(loadTable,1000); // set up timer
loadTable();
}
else if (timer) { // stop the interval timer
clearInterval(timer);
timer = null;
}
});
});
function loadTable() {
$('#tablecontainer').load( '/controller/tabledata #innercontainer' );
}
Full View (contains at least the following )
<div id="tablecontainer">
<div id="innercontainer">
<table>
<thead>...</thead>
<tbody>...</tbody>
</table>
</div>
</div>