Using jQuery on AJAX response data

Question

I'm looking to use jQuery to determine if the current page has changed upstream, and if so, perform some action.

I want to do this by using jQuery selectors over the data returned by an AJAX call (for the purposes of this question, my "page has changed" metric will be "has the content of first <h1> changed").

Thus I find myself wanting to use jQuery selectors over the HTML returned by an AJAX get(). The "best" "solution" I've found thus far is appending the data to some hidden div, and using a selector over that, as below:

var old_title = $('h1').html();

$.get(url, function(data) {
    $('#hidden_temporary_storage').append(data);
    var new_title = $('#hidden_temporary_storage h1').html();
    if (new_title !== old_title) {
        do_something();
    }
});

This feels so very wrong - I'd be nesting html / head / body tags, and there would be id collisions et cetera.

I have no control over the upstream page, so I can't just "get the data in a more convenient format" alas.

Ideally, you would avoid querying for data you don't need. If possible, try tailor the answer to the request to meet your needs. — kontur
– kontur, Commented Jan 9, 2012 at 13:23
As per the last line "I have no control over the upstream page" — Kristian Glass
– Kristian Glass, Commented Jan 9, 2012 at 13:51

techfoobar · Accepted Answer · 2012-01-09 13:40:34Z

3

You can do:

var x = $('<div>'+data+'</div>').find('h1').html();
// use x as you like

i.e. you don't need to append the returned data to your page to be able to get properties and values from HTML elements defined within it. This way there would be no id collisions, multiple head/body tags etc.

edited Jan 9, 2012 at 13:40

answered Jan 9, 2012 at 13:17

techfoobar

66.8k14 gold badges117 silver badges138 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Jean-Philippe Gire Over a year ago

I just tried that and it doesn't work. $('<html><body><div class="toto">bob</div></body></html>').find('.toto').html() (returns null)

techfoobar Over a year ago

$() strips off the head, body etc.. and returns only the list of elements inside the body of the HTML string. For example: $('<html><body><h1>Hello</h1><div class="toto">bob</div></body></html>') returns a list of 2 objects namely a h1 and div with class toto.

Jean-Philippe Gire Over a year ago

Yeah and if you try to find something in it $(htmlstring).find('.myclass') it will return null ;)

techfoobar Over a year ago

Updated the answer to correct the issue pointed out by Jean-Philippe Gire

Kristian Glass Over a year ago

I'm still experiencing the same issue as Jean-Philippe - every time I find() I get null...

|

Jean-Philippe Gire · Accepted Answer · 2012-01-09 13:26:20Z

1

I think your best bet here is to use an iFrame. And then use jQuery on the content of that iFrame.

var old_title = $('h1').html();

$.get(url, function(data) {
    $('<iframe id="tmpContent"></iframe>').appendTo("html");
    $('#tmpContent').contents().find('html').html(data);
    var new_title = $('#tmpContent').contents().find('h1').html();
    if (new_title !== old_title) {
        do_something();
    }
    $('#tmpContent').remove();
});

answered Jan 9, 2012 at 13:26

Jean-Philippe Gire

9017 silver badges15 bronze badges

Collectives™ on Stack Overflow

Using jQuery on AJAX response data

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related