Question

$(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>

Answer 1

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);
});