jquery Find div by ID from an ajax output

Question

I'm afraid very similar question has been asked already here, but for some reason it simply outputs "null".

I'm trying to find a div html from an ajax output by id. Below is my script.

// LOAD NAVIGATION
$.ajax({
  type: 'POST',
  url:  'includes/content/bookingsystem/b_navigation.php',
  data: thisButtonType + '=true&loadNav=date',
  success: function(output) { 

    alert(output); // Outputs correctly two divs #navDay, and #navMonth

    alert($(output).find('#navDay').html()); // Results into "null"

    $('#navDay').html($(output).find('#navDay').html()); // Results in an empty div, since it overwrote the html with 'null' - nothing.

    //$('#navDay').replaceWith($('#navDay', output)); // Same here - nada.
    //$('#navMonth').html($(output).find('#navMonth').html());

  }

});

The first alert(output) results this:

<div id="navDay">Im day nav!</div>
<div id="navMonth">Im month nav!</div>

Alnitak · Accepted Answer · 2011-08-01 18:58:29Z

4

You need to wrap your two divs in an outer div if you expect to be able to use .find() or $(selector, context) - those functions only find descendent nodes, and you have two sibling nodes in your HTML without a real parent.

You could either do that wrapping server side, or use .wrap().

Furthermore, the .html() function only returns the inner content of your tags, not the tags themselves.

Assuming (based on your use of .replaceWith) that your intention is to replace entire elements, and not just text, I'd go for:

<div>
    <div id="navDay">Im day nav!</div>
    <div id="navMonth">Im month nav!</div>
</div>

At which point this line from your previously non-working code will work too:

$('#navDay').replaceWith($('#navDay', output));

edited Aug 1, 2011 at 18:58

answered Aug 1, 2011 at 18:42

Alnitak

341k72 gold badges420 silver badges503 bronze badges

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

2 Comments

Dusty Over a year ago

Amazing, thank you a whole lot. Didn't realize that it had to be wrapped like that.

D.Tate Over a year ago

I could never find a way to properly execute a .wrap() on output as @Alnitak suggested. I tried to .wrap() so that I could do a .find(), but i didn't get anywhere. Wound up going and different route and just used .filter() as suggested at stackoverflow.com/a/400232/923817

ShankarSangoli · Accepted Answer · 2011-08-01 18:44:04Z

0

Try this

// LOAD NAVIGATION
$.ajax({
  type: 'POST',
  url:  'includes/content/bookingsystem/b_navigation.php',
  data: thisButtonType + '=true&loadNav=date',
  success: function(output) { 

    //alert(output); // Outputs correctly two divs #navDay, and #navMonth

    //alert($(output).find('#navDay').html()); // Results into "null"

    $('#navDay').html($('#navDay', $(output).wrap("<div />")).html()); // Results in an empty div, since it overwrote the html with 'null' - nothing.

    //$('#navDay').replaceWith($('#navDay', output)); // Same here - nada.
    //$('#navMonth').html($(output).find('#navMonth').html());

  }

});

answered Aug 1, 2011 at 18:44

ShankarSangoli

69.9k13 gold badges96 silver badges124 bronze badges

Collectives™ on Stack Overflow

jquery Find div by ID from an ajax output

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related