JQuery заменяет весь DIV, используя .load ()

Question

JQuery заменяет весь DIV, используя .load ()

8

Я хочу обновить <div> в конце модального диалога jQuery UI.

Мой код:

var dialog = jQuery('#divPopup').dialog({
    autoOpen: false,
    height: 450,
    width: 650,
    modal: true,
    open: function(event, ui) {
        jQuery('body').css('overflow', 'hidden');
    },
    close: function(event, ui) {
        jQuery('#divPopup').dialog('destroy').remove();
        jQuery("#bodyId").load("http://www.xyz.com/ #bodyId");
    }
});

Но вместо того, чтобы заменить его, он добавляет новый <div> в старый <div>:

<div id="bodyId">
    <div id="bodyId">
        New Response
    </div>
</div>

Я хочу заменить старый div bodyId на новый div bodyId.

AliMan 16 янв. 2012, в 07:46

Источник

2

Вы уверены, что ваш серверный скрипт "http://www.xyz.com/#bodyId" не включает <div id="bodyId"> в свои выходные данные?
techfoobar 16 янв. 2012, в 05:58
1

@techfoobar перед #bodyId . .load() документацией .load() , глава «Загрузка фрагментов страницы».
PPvG 16 янв. 2012, в 06:01
0

+1 @PPvG - Спасибо за указатель.
techfoobar 16 янв. 2012, в 06:26

Показать ещё 1 комментарий

Теги:

javascript

jquery

jquery-ui

jquery-load

3 ответа

0

Вы также можете использовать jquery.get.

$.get('http://www.xyz.com/', function(data) {
  $('#bodyId').html(data);
});

Paul Lernmark 16 янв. 2012, в 07:08

-4

вы можете использовать этот код, например

$('#bodyID').remove();
$('#bodyID').load();

lioncin 16 янв. 2012, в 07:48

2

Я не думаю, что это сработает. Первая строка удалит div из дерева DOM, что означает, что выбор jQuery во второй строке не будет совпадать.
PPvG 16 янв. 2012, в 06:28

Ещё вопросы

Вы уверены, что ваш серверный скрипт "http://www.xyz.com/#bodyId" не включает <div id="bodyId"> в свои выходные данные?
@techfoobar перед #bodyId . .load() документацией .load() , глава «Загрузка фрагментов страницы».
Я не думаю, что это сработает. Первая строка удалит div из дерева DOM, что означает, что выбор jQuery во второй строке не будет совпадать.

PPvG · Accepted Answer · 2012-01-16T07-08-00.000Z

Попробуйте заменить это:

jQuery("#bodyId").load("http://www.xyz.com/ #bodyId");

... с этим:

jQuery("#bodyId").load("http://www.xyz.com/ #bodyId > *");

Это работает, потому что вы можете использовать любой селектор после URL. Используя #bodyId > * вместо просто #bodyId, вы сопоставляете все, что находится внутри div, вместо самого div.

Вам нужно это, потому что .load() не заменит элемент; он добавит результат вызова AJAX к элементу.

В качестве альтернативы вы можете использовать .get() для загрузки данных и вручную выполнить выбор, например:

$.get('http://www.xyz.com/', function(data) {
    var newContent = $(data).find('#bodyId').children();
    $('#bodyId').empty().append(newContent);
});

Примеры обоих методов находятся здесь: http://jsfiddle.net/PPvG/47qz3/