$(function() {
setInterval(function() {
$.get("refresh.php", function(result) {
$('#response').empty()
.hide()
.html(result)
$("#response").append(result)
.fadeIn("slow");
});
}, 5000);
});
actually my script hits refresh.php every 5seconds in refresh.php i fetch data from mysql db and create a template like:
<table>
<tr><td>Name<td><td>$fetch['name']</td></tr>
</table>
I checked on firebug my refresh.php send response only once after 5seconds but on all browsers it shows the result two times like:
<table>
<tr><td>Name<td><td>$fetch['name']</td></tr>
</table>
<table>
<tr><td>Name<td><td>$fetch['name']</td></tr>
</table>
It shows the result twice because you're putting it there twice: First using html
, then using append
:
$(function() {
setInterval(function() {
$.get("refresh.php", function(result) {
$('#response').empty()
.hide()
.html(result) // <==== Here
$("#response").append(result) // <==== And here
.fadeIn("slow");
});
}, 5000);
});
html
replaces the content of the element with the markup (or element[s]) you supply (there's no need for empty
prior to using it). append
appends the markup (or element[s]) you supply to the element.
You want one or the other. I'd go with html
:
$(function() {
setInterval(function() {
$.get("refresh.php", function(result) {
$('#response')
.hide()
.html(result)
.fadeIn("slow");
});
}, 5000);
});
Use the following
$.get("refresh.php", function(result) {
$("#response").html(result);
});