Bug Tracker

#12363 closed bug (notabug)

Opened August 21, 2012 10:40AM UTC

Closed September 08, 2012 04:34PM UTC

Selector fails for top elements on $.ajax response

Reported by: mikioma@gmail.com Owned by:
Priority: undecided Milestone: None
Component: unfiled Version: 1.8.0
Keywords: Cc:
Blocked by: Blocking:
Description

Hi!

I'm using $.ajax to partially update an HTML page. I request the whole page and use "success" callback to select the part I want to update:

$.ajax({
  url: "/this_same_page.jsp",
  success: function(data) {
    var new_content = $("#id_of_the_part_i_wanna_update", data);
    $("#id_of_the_part_i_wanna_update").html(new_content);
  }
});

That code always works unless "#id_of_the_part_i_wanna_update" refers to a top level tag into the page body.

For example, it will work if the response is something like:

<html>
<body>
  <div>
    <div id="id_of_the_part_i_wanna_update">New Content</div>
  </div>
</body>
</html>

But it won't if the "id_of_the_part_i_wanna_update" div becomes top-most, say:

<html>
<body>
  <div id="id_of_the_part_i_wanna_update">New Content</div>
</body>
</html>

It can be tested by "alert"ing the result of the selector:

$.ajax({
  url: "/this_same_page.jsp",
  success: function(data) {
    var new_content = $("#id_of_the_part_i_wanna_update", data);
    alert(new_content);
  }
});

In the later case, I mean when selecting a top-most element, jQuery 1.7.2 will return "null" whereas jQuery 1.8.0 will return "undefined".

It also fails if querying by class name:

$(".some_class", data)

or just by tag mane:

$(".some_class", data)

... as far as the selected tag is top-most into the page body.

Regards,

Miguel Angel

Attachments (0)
Change History (1)

Changed September 08, 2012 04:34PM UTC by mikesherov comment:1

resolution: → notabug
status: new → closed

Thanks for contributing! Please ask for further help on the forums or stackoverflow, but you're using the jquery function incorrectly. It just happened to work weirdly enough. What you should be doing, assuming that 

data
is some html is:

$.ajax({
  url: "/this_same_page.jsp",
  success: function(data) {
    $("#id_of_the_part_i_wanna_update").html(data);
  }
});

If you need further help, ask for it on the forums! Thanks!