Question

I am trying to make a self-updating element with jQuery. Here’s my code:

function chart_readyset() {
    $.get("chart.php?live=true", function(data) {
    if(data.replace(/[ \t\r]+/g,"").split('\n').join('') != $("#chart-wrapper").html().replace(/[ \t\r]+/g,"").split('\n').join('')) {
        $("#chart-wrapper").fadeOut('fast').html(data).fadeIn('fast');
    }
    window.setTimeout(chart_readyset, 5000);
  });    
}

As you can see it loads data from chart.php?live=true and compares it to the element’s html then updates it (with flashing effect) only when data is actually updated. I had to remove all the whitespaces from html.

This code works in all browsers except IE. So I invented a new method that seems more stable and elegant. With PHP I generate some hash code and pass it through <meta> tag:

<meta id="hash" hash="25a4f466ee0b2f12fe505dd9a1151456">

So now I need to extract this data from response html. It’s pretty easy to extract it from a DOM tree:

$('#hash').attr('hash');

But I can’t do the same thing with raw html response. I tried to DOM-ify it first ($(data).find('#hash').attr('hash')) but it doesn’t work (in console log there’s just “undefined”). What am I doing wrong?

Answer 1

use this:

$(data).filter('#hash').attr('hash');

filter():

Reduce the set of matched elements to those that match the selector or pass the function’s test.

For More Demos and Examples :

filter() on jQuery API