CODEWITHSUNDEEP
jqueryajax
stackoverflow
stackoverflow

Reputation: 19434

How do you stop flickering of text or an element when using ajax to refresh in intervals?

<script>

$(document).ready(function()
    {
        setInterval(doAjaxStuff, 500);
    }); 
    function doAjaxStuff()
    {
        /* $.ajaxSetup ({ cache: false  }); */  

        $.ajax
        ({
            url: "../getStatus/"+id,
            dataType: 'json',
            success: function(json) 
            {
                if(json.status ==  "ACTIVE")
                {
                    $('#ajaxStatus').html(jason.status);

                }
            });
         }

</script>


//I get refreshed and cause flickering
<p id= ajaxStatus > Refresh Me</p>

Upvotes: 3

Views: 4486

Answers (5)

Shaze
Shaze

Reputation: 972

Use this:

$( '#ajaxStatus' ).replaceWith( jason.status );

Upvotes: 1

frankey
frankey

Reputation: 41

I had the same problem on using a jquery load();

$('#div').load('/ajax.php', data);

In the ajax.php that i loaded into the #div i included the jquery lib and my stylesheet again. so the new content got new style and jquery functions right?

Found out the new content picks up the parent css and js functions!

bottomline:

including same css in new loaded div as parent cause blinking because the html elements get styled again.

Upvotes: 2

Rodolfo
Rodolfo

Reputation: 4183

there is an easier to use jquery function to load text from a page. You could replace the whole .ajax call with $("#ajaxStatus").load("../getStatus/" + id)

Not sure if that stops the flickering but at least should make the program cleaner.

Upvotes: 2

locrizak
locrizak

Reputation: 12281

I would say 500 is way too fast. You have to remember that the interval will keep going and requesting the info even if the ajax call is not completed. my suggestion is to either change setInterval to setTimeout and reinitialize the timeout on success, or crank up the interval to 1500-2000. You better off with the timeout though

Upvotes: 1

Bj&#246;rn
Bj&#246;rn

Reputation: 1601

Try to add a check so you only update if the value has changed. 

if(json.status ==  "ACTIVE" && $('#ajaxStatus').html() !== "ACTIVE")
{
    $('#ajaxStatus').html(jason.status);        
}

Upvotes: 1

Related Questions