замена HTML в div с использованием $ .load

Question

Я использую jQuery ajax-метод, и в succcess (.done) я хочу загрузить какой-то HTML, чтобы пользователи получали обновленные данные в своем профиле.

HTML-код, который я пытаюсьзамена выглядит следующим образом,

<div id="large_buttons"><a href="">Button</a><a href="">Button 2</a></div>

Для этого я делаю следующее,

$("#large_buttons").load(site_url+"my_profile #large_buttons");

Однако это просто создает следующий HTML,

<div id="large_buttons"><div id="large_buttons"><a href="">Button</a><a href="">Button 2</a></div></div>

Что яя хочу это загрузить мой новый HTML полностью перезаписать существующий #large_buttons div

это возможно?

Answer 1

Если я правильно понимаю, вы хотите заменить div#large_buttons на новую версию, полученную с сервера. Метод JQuery replaceWith () должен помочь.

Answer 2

Если вы хотите внести наименьшее количество изменений в существующий код, то самым простым будет заключить #large_buttons в другой элемент (где он будет единственным потомком) и просто использовать .load для этого элемента.

Вам не нужно было бы делать это, если вы утратили .load и ушли с более основными функциями, такими как $.get, например:

$.get(large_buttons_url, function(data) {
    $("#large_buttons").replaceWith(data);
});

... но тогда вы потеряетеавтоматическая фильтрация DOM, которую может .load (вы больше не можете добавлять #large_buttons к URL), поэтому вы должны убедиться, что AJAX-запрос only возвращает интересующий вас фрагмент HTML.

Лично это то, что я бы сделал, так как не очень приятно извлекать всю страницу и отбрасывать все, кроме ее части;но опять же, это потребует от вас изменения большего количества кода, чем альтернативы.

Answer 3

Метод .load() (как вы видели) загружает ответ непосредственно в указанный элемент, поэтому одним из решений является изменение кода на стороне сервера для вывода только содержимого без #large_buttons сам div.

Другое решение состоит в том, чтобы использовать один из других Ajax-методов , например, .get() метод , и поместить возвращенный html именно туда, куда вы хотите, в рамках успеха. обработчик:

$.get(site_url+"my_profile", function(data) {
    $("#large_buttons").replaceWith(data);
},'html');

(Теоретически вам не нужен последний параметр для указания типа данных, потому что jQuery делает "интеллектуальное предположение", но не помешает явно сказать, что вы ожидаете HTML.)

Метод .replaceWith() делает именно то, что должен звучать.

РЕДАКТИРОВАТЬ: я только что заметил (как указал Джон), что вы использовали синтаксис .load(), где вы включаете селектор для какой части возвращаемого HTML, чтобы использовать, так что вы можете просто изменить этот селектор, чтобы взять элементы в ответе, находящиеся внутри #large_buttons div:

$("#large_buttons").load(site_url+"my_profile #large_buttons > *");

Должен работать с вашим примером HTML, где div содержит только другие элементы, а не текстовые узлы.

Answer 4

для загрузки некоторого контента с помощью ajax в любой ваш div, вы можете использовать jQuery load function

$("#large_buttons").load("url_which_Returns_html.php",function(data){
   alert("Items loaded");
});

Это позволит загрузить контент (перезаписать существующий контент), возвращаемый со страницы php, в div с идентификатором «large_buttons»

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

$.get("url_which_returns_html.php",function(data){
   ('#right').after(data);
});

Это загрузит ответ со страницы php после div с идентификатором "right"