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>

Answer 1

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));