Trouble with dynamic refreshing div

Question

I make div which refresh when file is updated. But it continuously refresh (fade out and fade in every second).
I't source test2.php

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js>
    </script>                          
    <script> 
    $(document).ready(function() {
       $('#loaddiv').load('check.chat.php');
     });


    var auto_refresh = setInterval( function() {
    $.ajax(
        {
        type: 'POST',
        data:"id=100",
        url: "check.chat.php",
        success: function(result) 
        {
            if($("#loaddiv").html() != result)
            {
                $("#loaddiv").fadeOut("fast")
                $("#loaddiv").html(result);
                $("#loaddiv").fadeIn("slow");
           }
        }
    });
    }, 1000);
    </script>

    <div id="loaddiv"></div>

And file on site: **

Who knows what's the problem?

because you using `setInterval()`, it do things with interval you provided, you need to refresh your page in success callback only — , Sep 09 '12 at 10:58
The problem lay within you comparison `if($("#loaddiv").html() != result)`. Not sure why at the moment, but that if statement always validates to true, and therefor your content flickers. Have to tried to log both the result of the Ajax-call and the old HTML, so that you can see what they really look like. My guess is that there is something fishy going on there. — Christofer Eliasson, Sep 09 '12 at 11:01
Andrzej, use Firebug (addon) to debug ajax and do just about anything else JS related in Firefox. — FilmJ, Sep 09 '12 at 11:06

Shomz · Accepted Answer · 2012-09-09T11:06:16.407

1

This part:

$("#loaddiv").fadeOut("fast")
$("#loaddiv").html(result);
$("#loaddiv").fadeIn("slow");

Should be:

$("#loaddiv").fadeOut("fast", function(){
        $("#loaddiv").html(result);
        $("#loaddiv").fadeIn("slow");
});

In your case, both fades are called at the same time, making an animation queue, causing it to go from one phase to another in about the same time the interval triggers again.

UPDATE

To see logs, do this: console.log("html: ", $("#loaddiv").html(), "result: ", result);

edited Sep 09 '12 at 11:06

answered Sep 09 '12 at 10:59

Shomz

37,421
4
57
85

I tried it but still fade out and fade in every second although it's same text. Maybe it's problem which check.chat which generate text from mysql? – sdfh54nf5 Sep 09 '12 at 11:03
Yeah, I couldn't say anything about that since there's no code... What does the console.log say for both the load div and the ajax result? – Shomz Sep 09 '12 at 11:04
Right above the if clause. And you'll see the log using Dev Tools in Chrome (CTRL+Shift+I) and in Firebug in Firefox (there are also equivalents in Opera, etc). – Shomz Sep 09 '12 at 11:09
html: sdfsdf;2012-09-25;xxxxxxxx; result: sdfsdf;2012-09-25;xxxxxxxx; – sdfh54nf5 Sep 09 '12 at 11:10
that's it then... the php file should only output `sdfsdf;2012-09-25;xxxxxxxx` not the whole HTML structure. – Shomz Sep 09 '12 at 11:11

Trouble with dynamic refreshing div

1 Answers1

Linked