jquery - get text of html return

Question

This is probably simple but i can't seem to find my answer...

i have an ajax call that returns html

 dataType: "html"

and it's returned 'msg' looks like:

<div id="x"><p>Hello</p></div>

and that gets dom-added to the top of a parent div:

ajax call...
request.done(function(msg) {
   $('#parent').prepend(msg);
}

The issue is, i DONT want to do this dom manipulation if it's text hasn't changed (as there are other effects that take place that i've truncated out. (This is a notice display that checks for updates in an interval)

so, what i want to do is find "Hello" within msg and compare it against a current div x's p that may already be on page. This second part is easy to address, but the first part, I need to do something like msg.text() to just get "Hello", but a few varities i tried failed.

pointers?

Answer 1

use filter() to find the text..

try this

$(msg).filter('div#x p').text(); //this  will give you hello

OR find()

 $(msg).find('div#x p').text();

Answer 2

So you can do the following :

Hold the text from the previus query in a variable

var previusData;

then after the first request add that data to the variable, you can do this by using filter or like this :

previusData = $("#x p").html();

then before adding it to the DOM do a check by adding a new varible

request.done(function(msg) {
   var currData = $("#x p").html();
   if(currData != previusData){
     $('#parent').prepend(msg);
   }
}

Answer 3

Assuming that the "notice" isn't present on page load and it gets fetched after page load, you could use a global variable (or a namespace) to hold previous value of the response and every time a new response is received, match it against the already stored response; discard if not changed; or use if changed and update the global variable

var cached_response = '';
ajax call...
request.done(function(msg) {
   if(msg != cached_response){
      $('#parent').prepend(msg);
      cached_response = msg;
   }
}

Answer 4

One way is, you can use regex form replacing all html tags like this :

$(document).ready(function() {
    var text = '<div id="x"><p>Hello</p></div>';
    console.log(text.replace(/(<([^>]+)>)/ig,""));
});

Just put this line in your script, and compare with the data.

Here is the working example : http://jsfiddle.net/cGnG5/1/

And another way is using .filter() function as told in another answer.