I have a PHP file called data.php and I want to use jQuery to call the file and return its contents to
<div id="datacontainer"></div>
every 60 seconds. I have found lots of examples on here where the event is triggered onclick but I am struggling to find a solution for a timed event.
What is the best practice way to insert the output of a file named path/to/file/data.php into a div using jQuery/Ajax?
/* set interval to call function every 60 seconds */
setInterval(function(){
/* start ajax */
$.ajax({
url: "path/to/file/data.php",
type: "GET"
}).done(function(html) {
/* when it's done, take the return and replace whatever is in the DIV with it
if you dont want to replace, but append, just use the .append(html) function */
$( '#datacontainer' ).html( html );
});
}
/*60 seconds * 1000 miliseconds*/
,60000);
Check this out: http://api.jquery.com/load/ and https://developer.mozilla.org/en-US/docs/Web/API/Window.setInterval
Example:
setInterval(function() {
$( "#datacontainer" ).load( "data.php" );
}, 60000);
Also consider using successCallback of jQuery load and setTimeout, as usually you want to wait till server will return contents. In my opinion best practice would be:
var ID = null,
time = 60000,
func = function() {
$( "#datacontainer" ).load( "data.php", function() {
ID = setTimeout(func, time);
});
};
ID = setTimeout(func, time);
But it depends on use case.
var $contentdiv = jQuery('#datacontainer');
window.setInterval(function () {
$contentdiv.load("path/to/file/data.php");
}, 60000);
If you had googled "timer events javascript" you would have found this MDN page...
setInterval()