Question

I have a php file which is called every X second in ajax to refresh a content. This php file return a js file wich must change the html content of a div with a effect.

But I would want to change this content only if the new is different! Else, I have a div which refresh itself with the effect even if it’s the sames contents!

I tested with this code:

if ($('#mydiv').html()!=data_insertion) $('#mydiv').fadeTo("fast", 0, function () {$(this).html(data_insertion).fadeTo("fast", 1)});

But this code isn’t cross browser… Indeed, my data_insertion variable contains some html content. And each browser insert it changing the attribut order etc. That’s why, $(‘#mydiv’).html() is never equal to data_insertion.

Answer 1

You can use a local cache of the result, attached to the element.
In your ajax callback do something like:

if (jQuery.data($('#mydiv')[0], 'last_data_insertion') != data_insertion) {
    // Update DOM content
    $('#mydiv').fadeTo("fast", 0, function () {$(this).html(data_insertion).fadeTo("fast", 1)});

    // Reset the local cache
    jQuery.data($('#mydiv')[0], 'last_data_insertion', data_insertion);
}