Как заменить элемент 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?
Вы можете использовать replaceWith (см .: http://api.jquery.com/replaceWith/ )
Например: $('#products').replaceWith(response);
EDIT: функция replaceWith, упомянутая pascalvgemert, лучше https://stackoverflow.com/a/19527642/2887034
Создайте вокруг него обертку:
<div id="wrapper"> <ul id="products"> ............... </ul> </div>
Теперь вы можете сделать следующее:
$('#wrapper').html(responseData);
Вы можете использовать JQuery раньше
$('#products').before("yourhtmlreceivedfromajax").remove();
Или просто замените содержимое div на html $('#products').html("yourhtmlreceivedfromajax");
Если ваш основной 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); });
Простым способом является обертывание вашей ul в контейнер
<div id="container"> <ul id="products"> ............... </ul> </div>
в ответе ajax
success:function(data){ $("#container").html(data) }
.remove () полностью выводит элемент из DOM. Если вы просто хотите заменить элемент внутри элемента products , вы используете .ReplaceWith () .
Если вы возвращаете все <li> как HTML, вы можете использовать .html ()
Предполагая, что вы заменяете свои продукты, если вы получаете отформатированный HTML-код от своего контроллера, тогда просто сделайте это
success : function(response) { $('#products').html(response); }
Не нужно удалять тег <ul>. Вы можете просто заменить старые <li> s новыми <li> s