JQuery replace entire DIV using .load()

Question

I want to refresh a <div> on the close of a jQuery UI Modal Dialog.

My code is:

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");
    }
});

But instead of replacing it, that adds the new <div> inside the old <div>:

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

I want to replace old div bodyId with new div bodyId.

Are you sure your server dide script `"http://www.xyz.com/#bodyId"` does not include a `
` in its output? — techfoobar, Jan 16 '12 at 05:58
@techfoobar there is a space before `#bodyId`. Have a look at [`.load()` docs](http://api.jquery.com/load/), chapter "Loading Page Fragments". — Peter-Paul van Gemerden, Jan 16 '12 at 06:01

Peter-Paul van Gemerden · Accepted Answer · 2012-01-16T06:17:35.080

Try to replace this:

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

... with this:

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

This works because you can use any selector after the URL. By using #bodyId > * instead of just #bodyId, you match everything that is inside the div, instead of the div itself.

You need this because .load() will not replace an element; it will append the result of the AJAX call to the element.

Alternatively, you could use .get() to load the data and manually perform the selection, like so:

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

Examples of both methods are online here: http://jsfiddle.net/PPvG/47qz3/

score 0 · Answer 2 · answered Jan 16 '12 at 06:10

0

You could also use jquery.get.

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

answered Jan 16 '12 at 06:10

Paul Lernmark

511
1
6
17

score -4 · Answer 3 · answered Jan 16 '12 at 06:00

-4

you may be use this code like

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

answered Jan 16 '12 at 06:00

lioncin

145
1
1
7

2

I don't think this would work. The first line would remove the `div` from the DOM tree, which means the jQuery selection on the second line won't have a match. – Peter-Paul van Gemerden Jan 16 '12 at 06:28

JQuery replace entire DIV using .load()

3 Answers3