HTML Response compared with old html

Question

I have a response from an AJAX request using jQuery returned as 'response'

I need to compare it with old HTML. If it is different it will just do some css.

The problem is it detects a different change everytime even when there is no difference and there is a continueous loop which makes my animation on css repeat itself.

Anyone help?

var oldHTML = $("#container").html();
$.ajax({  
                url: "ajax/log.php",  
                cache: false,
                dataType: "JSON",
                success: function(response){
if(oldHTML != response){ $("#container").css({"border":"1px solid red"}),$("#container").animate({"border":"none"}); }
                    }

It does not always detect a change or no change. It also loops the animation bit :S

Answer 1

I would rephrase your question to mention jQuery & AJAX -- took me a second to see the tags.

I would use a file comparison such as WinMerge (free) to see what the difference is.

My guess is it might have to do with spacing, in which case you can use a trim function.

Also, if you post your code it would be helpful.

Answer 2

There might be alterations to the html when its being appended to the DOM. I would store the HTML into the element as a data object as-is to keep a copy of it.

Such as

   // get the saved response, if any, that was saved on the last ajax request
    var oldHTML = $("#container").data('oldHTML');
    $.ajax({  
                    url: "ajax/log.php",  
                    cache: false,
                    dataType: "JSON",
                    success: function(response){
                      if(oldHTML != response){
                         $("#container").css({"border":"1px solid red"});
                         $("#container").animate({"border":"none"}); }
                        // assign the original server response to oldHTML
                         $("#container").data('oldHTML', response);
                        // shove response into the DOM
                         $("#container").html(response);
                       }else {
                          // i guess you're doing nothing here?
                      }
           });

or someting similar, hopefully that conveys the idea