jQuery.load() Retrieving partial page content causes duplicate ID in DOM

I currently have a JS function that allows me to load partial content from another page into the current page using jQuery.load()

However I noticed when using this that I get a duplicate ID in the DOM (when inspecting with FireBug)

This function is used in conjuction with a Flash Building viewe so it does not contain any code to retrieve the URL from the anchor tag.

function displayApartment(apartmentID) {
    $("#apartmentInfo").load(siteURL + apartmentID + ".aspx #apartmentInfo", function () {
        //re-do links loaded in
        $("a.gallery").colorbox({ opacity: "0.5" });
    });
}

The code above works just fine in retrieving the content, however it just bugs开发者_如何学Go me that when inspecting with firebug I get something like this.

<div id="apartmentInfo">
    <div id="apartmentInfo">
        <!-- Remote HTML here..... -->
    </div>
</div>

Can anyone please suggest anything on how to remove the duplicate div?

Thanks, Warren

If it's just that ID that is causing you an annoyance, you could either change that id, or remove the duplicate when the document is loaded:

function displayApartment(apartmentID) {
    $("#apartmentInfo").load(siteURL + apartmentID + ".aspx #apartmentInfo", function () {
        $(this).attr('id', 'somethingElse'); //change the id
        // OR
        $(this).children().unwrap(); // remove the second apartmentId from the DOM completely.

        //re-do links loaded in
        $("a.gallery").colorbox({ opacity: "0.5" });
    });
}

If it's multiple ID's, the only solution I can think of is to prefix all the ID's within the remote page with something, or load the remote page in an IFRAME.

function displayApartment(apartmentID) {
    $("#apartmentInfo").load(siteURL + apartmentID + ".aspx #apartmentInfo", function () {
        $(this).find('*[id]').andSelf().attr('id', function (index, previous) {
            return 'a-random-prefix-' + previous;
        });

        //re-do links loaded in
        $("a.gallery").colorbox({ opacity: "0.5" });
    });
}

a way around it maybe

function displayApartment(apartmentID) {
    var parent = $("#apartmentInfo").load(siteURL + apartmentID + ".aspx #apartmentInfo", function () {
        parent.children(':first').unwrap();
        //re-do links loaded in
        $("a.gallery").colorbox({ opacity: "0.5" });
    });
}

Simply Use This:

#apartmentInfo > *

Full Code:

function displayApartment(apartmentID) {
    $("#apartmentInfo").load(siteURL + apartmentID + ".aspx #apartmentInfo > *", function () {
        //re-do links loaded in
        $("a.gallery").colorbox({ opacity: "0.5" });
    });
}

I came here thanks to the Google looking for what I believe OP was really looking for; a way to have all of the contents of $(selector).load('my.html #apartmentInfo') without the surrounding div.

E.g.:

<div id='apartmentInfo' data-from="main page">
    Address: 123 Hell Street
    <p>Manager: Hugh Jass</p>
    ...
</div>

...rather than the default behavior of $('#apartmentInfo').load('my.html #apartmentInfo') which results in:

<div id='apartmentInfo' data-from="main page">
    <div id='apartmentInfo' data-from="my.html">
        Address: 123 Hell Street
        <p>Manager: Hugh Jass</p>
        ...
    </div>
</div>

The use of .unwrap() above comes close, but results in this:

<div id='apartmentInfo' data-from="my.html">
    Address: 123 Hell Street
    <p>Manager: Hugh Jass</p>
    ...
</div>

...which is a problem if you have any attributes set on the data-from="main page" div that are not also set on the data-from="my.html" div as they are lost.

The code below retains the data-from="main page" div while stripping the data-from="my.html" div post .load:

var $apartmentInfo = $('#apartmentInfo'),
    $tempApartmentInfo = $apartmentInfo.clone()
;

$tempApartmentInfo.contents().remove();

$tempApartmentInfo.load('my.html #apartmentInfo', function (response, status, xhr) {
    $tempApartmentInfo.children().each(function () {
        $apartmentInfo.append($(this).contents());
    });
});

This code avoids all issues with duplicate IDs as described by OP (but the contents of the remote #apartmentInfo may have duplicate IDs) as the data-from="my.html" div is never loaded into the DOM thanks to the use of the detached $tempApartmentInfo.

Or... here it is again as a jQuery plugin named loadContents:

//# .load the specified content while stripping the outer-most container
jQuery.fn.loadContents = function (url, data, complete) {
    var $target = $(this),
        $tempTarget = $target.clone()
    ;

    //# Clear out the $tempTarget so we are left with only the base element
    $tempTarget.contents().remove();

    //# Pass the call off to .load to do the heavy lifting
    $tempTarget.load(url, data, function (response, status, xhr) {
        //# Traverse the .children, .appending the .load'ed .contents of each child back into the $target as we go
        $tempTarget.children().each(function () {
            $target.append($(this).contents());
        });

        //# If the passed complete is a function, call it now
        if (Object.prototype.toString.call(complete) == '[object Function]') { complete(response, status, xhr); }
    });
};

NOTE: This plugin always strips the outer-most element in the loaded content. Also note that unlike jQuery's native .load this plugin does not remove and current content within the $target, but rather .appends the .loaded content onto the $target.