it-swarm.com.ru

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

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

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

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

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

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

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

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

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

18
pascalvgemert

Правка: функция replaceWith, упомянутая pascalvgemert, лучше https://stackoverflow.com/a/19527642/2887034

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

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

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

$('#wrapper').html(responseData);
3
Kim Hogeling

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

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

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

2
Salman

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

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

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

1
sdespont

Если ваш основной 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);
});
1
Cristian Bitoi

Самый простой способ - завернуть свой уль в контейнер 

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

в ответ Ajax 

success:function(data){
$("#container").html(data)
}
1
M Khalid Junaid

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

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

1
Andy

Сделай это

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

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

1
zzlalani