How to refresh only <div> content in a web page? - html

Question

The div is:
<div>
<canvas id="chart-area2" width="300" height="300"/>
</div>
how to refresh the above div every 10 seconds without reloading the page?
following is the javascript:
<script>
var pieData2 = [
{
value: <?= $pfstatetext;?>,
color:"#F7464A",
highlight: "#FF5A5E",
label: "Red :"
},
{
value: <?= $cpuusage; ?>,
color: "#46BFBD",
highlight: "#5AD3D1",
label: "Green"
},
{
value: 100,
color: "#FDB45C",
highlight: "#FFC870",
label: "Yellow"
},
{
value: 40,
color: "#949FB1",
highlight: "#A8B3C5",
label: "Grey"
},
{
value: 120,
color: "#4D5360",
highlight: "#616774",
label: "Dark Grey"
}
];
window.onload = function(){
var ctx2 = document.getElementById("chart-area2").getContext("2d");
var myPie2 = new Chart(ctx2).Pie(pieData2);
};
</script>
how can i use setInterval in the above code?.....................................................................................................

Answer 1

You may use that code
function refreshTheDiv(){
// Your drawing code here
window.setTimeout(refreshTheDiv,10000);
}
And replace the line // Your drawing code here with your code referencing the canvas element.
In your specific case :
(function(){
var myPie2;
window.onload = function(){
var ctx2 = document.getElementById("chart-area2").getContext("2d");
myPie2 = new Chart(ctx2).Pie(pieData2);
updateChart();
};
function updateChart()
{
$.getJson('/data.php',function(data){
// Do the update here (Seems dead : https://github.com/nnnick/Chart.js/issues/13 )
// You may deal with chartjs methods or recreate the chart:
myPie2 = new Chart(ctx2).Pie(data); // Quick and dirty solution
setTimeout(updateChart,10000);
});
}
})();
The data.php contains something like:
<?php
echo json_encode(
array(
array(
'value'=> $pfstatetext,
'color'=>"#F7464A",
'highlight'=> "#FF5A5E",
'label'=> "Red :"
),
array(
'value'=>$cpuusage,
'color'=> "#46BFBD",
'highlight'=> "#5AD3D1",
'label'=> "Green"
),
array(
value: 100,
color: "#FDB45C",
highlight: "#FFC870",
label: "Yellow"
)
//...
)
);
You must include JQuery : http://code.jquery.com/jquery-1.11.1.js
for my solution to work
ChartJS update data

Answer 2

If you want to update the canvas painting and you're not working with the server, use js setTimeout or setInterval (You can read about these functions here: http://www.w3schools.com/js/js_timing.asp). In the callback function that you pass to these functions you work with the canvas' context object and paint whatever you want.
If you want to update the content, like text and HTML, or if the painting is related to the server, I think you should use AJAX. AJAX enables communication after the page was loaded, so you don't have to load the whole page again. There are many tutorials for ajax, one of them is on W3schools. Also, if you work with AJAX, you should use the timing functions that I've mentioned before in order to refresh it every 10 seconds.
Another solution is to use Server-Sent Events. If you want to refresh the div in order to UPDATE the content (according to the DB, the server, etc.) so the content will be always updated, you can use this technique that follows about differences and updates, and loads them. You can read about it here : http://www.w3schools.com/html/html5_serversentevents.asp. I'm not sure if this technique is what you're looking for, it depends on what is your purpose of reloading the page, so I think the AJAX would be a great solution if the content is from the server, and the first solution is the only one which is correct if you don't work with the server.

Answer 3

write one function to fetch content inside div trough ajax, and write a jquery code to call the function in every 10 seconds.
For example:
function fetch_content(){
$.ajax({
url: "url for ajax page",
type: "POST",
success: function(data){
$('div').html();
}
});
}
and code to call this function every 10 seconds
setInterval(fetch_content,10000);