JQuery найти Div по идентификатору из вывода AJAX

Question

Боюсь, очень похожий вопрос уже задавался здесь , но по какой-то причине он просто выводит "ноль".

Я пытаюсь найти div html из вывода ajax по id. Ниже мой сценарий.

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

  }

});

Первое предупреждение (вывод) приводит к этому:

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

Answer 1

Вам нужно обернуть два своих div-элемента во внешний div, если вы предполагаете, что сможете использовать .find() или $(selector, context) - эти функции находят только потомки узлов, и у вас есть два узла-родителя вваш HTML без реального родителя.

Вы можете сделать это на стороне сервера или использовать .wrap().

Кроме того, функция .html() возвращает только inner содержание ваших тегов, а не сами теги.

Предполагая (исходя из вашего использования .replaceWith), что вы намерены заменить целые элементы, а не только текст, я бы пошел на:

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

В этот момент эта строка из вашего ранее нерабочего кода тоже будет работать:

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

Answer 2

Попробуйте это

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

  }

});