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

Question

Я хочу обновить <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.

Answer 1

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

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/

Answer 2

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

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

Answer 3

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

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