Как заменить элемент html на ajax-ответ?

Как заменить элемент html на ответ ajax? Я знаю, что это удалить элемент, как заменить этот удаленный тег на ajax-ответ? Например:

У меня такой код:

<ul id="products">
...............
</ul>

Когда я нажимаю на кнопку, вызов ajax выполняется в контроллер codeginter, где я получаю новые данные, вытащенные из базы данных и отображаемые в другом представлении, которое начинается с ul и заканчивается при закрытии ul.

В функции ajax success я делаю это:

$('#products').remove();
//What to do now here to replace the removed portion with response of ajax?

Ответ 1

Вы можете использовать replaceWith (см. http://api.jquery.com/replaceWith/)

Нравится: $('#products').replaceWith(response);

Ответ 2

EDIT: функция replaceWith, упомянутая pascalvgemert, лучше fooobar.com/questions/490968/...

Создайте вокруг него обертку:

<div id="wrapper">
    <ul id="products">
    ...............
    </ul>
</div>

Теперь вы можете сделать следующее:

$('#wrapper').html(responseData);

Ответ 3

Вы можете использовать JQuery before

$('#products').before("yourhtmlreceivedfromajax").remove();

Или просто замените содержимое div html $('#products').html("yourhtmlreceivedfromajax");

Ответ 4

Если ваш основной div находится внутри другого контейнера с другим идентификатором, вы можете сделать это:

На основе этой структуры:

<div id="mainContainer">
    <ul id="products">
         ...............
    </ul>
</div>

Код Javascript с использованием jquery для ajax

$.ajax({
  url: "action.php",
  context: document.body
}).done(function(response) {
  $('#products').remove(); // you can keep this line if you think is necessary
  $('mainContainer').html(response);
});

Ответ 5

Простым способом является перенос вашей ul в контейнер

<div id="container">
<ul id="products">
...............
</ul>
</div>

в ответе ajax

success:function(data){
$("#container").html(data)
}

Ответ 6

. remove() полностью переносит элемент из DOM. Если вы просто хотите заменить материал внутри элемента products, вы используете . ReplaceWith().

Если вы возвращаете все <li> как HTML, вы можете использовать . html()

Ответ 7

Сделайте это

$( "ul#products" ).replaceWith( response );

http://api.jquery.com/replaceWith/

Ответ 8

Предполагая, что вы заменяете свои продукты, если вы получаете отформатированный HTML-код от своего контроллера, просто сделайте это

success : function(response) {
$('#products').html(response);
}

Нет необходимости удалять <ul> . Вы можете просто заменить старый <li> s с новым <li> s