Jquery refresh div - php

Question

I've got a certain php code in a div which gets data from mysql.I want this div to refresh every minute without refreshing the entire page.
Currently I'm using this, doesn't work well
<div id="abc">
<?php
?>
</div>
window.setTimeout('location.reload()', 60000);

Answer 1

The ideal way to do this is to use jQuery.ajax to retrieve data from your server, and then use JavaScript/jQuery within your success function to update your page.
You can still use setTimeout or equivalent to periodically issue AJAX requests.

Answer 2

As you want to refresh the div content every minute you need to look at setInterval method and load of jQuery:
window.setInterval(function(){
$('#abc').load('PHPFile.php');
}, 1000);
and your PHP script mentioned in the url part of the load method must be capable to provide the result in HTML format which is going to be placed in the given div (id:abc)

Answer 3

Have the PHP-code on another page (for example; loaddata.php) and have a jQuery timer executing a function which loads the page loaddata.php
Loaddata.php
<?php
echo "Hello World!";
?>
index.php
<div id="data"></div>
<script>
$('#div').load("loaddata.php", function() {
window.setInterval("loadData", 60000);
});
function loadData()
{
$('#div').load("loaddata.php");
}
</script>

Answer 4

Something like this:
function refreshContent() {
$.post(urlHere, { data here...}, success(data) {
//...manipulate DOM here...
}
}
setTimeout(refreshContent, 60000);

Answer 5

Example of jQuery Ajax
file1.php
<?php
echo 'PHP content e.g. from database based on submitted request - '.$_POST['my-value'];
?>
file2.html
<div class="content"></div>
Refresh div
<script>
$(function(){
$(".reload-data").click(function(){
$.post("file1.php", {my-value: "something"}, function(data){
$(".content").html(data);
});
});
});
setTimeout(function(){$(".reload-data").click();}, 60000);
</script>

Answer 6

For these situations I sometimes use jQuery.load()
Example from documentation:
<div id="result"></div>
<script type="text/javascript">
function refreshDiv() {
$('#result').load('ajax/test.html #container', function(){ /* callback code here */ });
}
setInterval(refreshDiv, 10000);
</script>
This does the following:
Checks if the #result element is in the current page
If it is, it makes a request to the ajax/test.html page
Grabs the #container from the response, and dumps it into #result
And it does this every 10 seconds
That's about it. One line of code, although not as efficient as a true ajax request, it does the job.