1

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 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

Warren Buckley
  • 1,291
  • 1
  • 16
  • 20

4 Answers4

2

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" });
    });
}
Matt
  • 74,352
  • 26
  • 153
  • 180
2

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" });
    });
}
Reigel Gallarde
  • 64,198
  • 21
  • 121
  • 139
0

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" });
    });
}
EmRa228
  • 1,226
  • 13
  • 22
  • You don't get any text nodes with this approach. See: http://stackoverflow.com/questions/298750/how-do-i-select-text-nodes-with-jquery – Campbeln Jul 09 '14 at 04:05
0

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.

Campbeln
  • 2,880
  • 3
  • 33
  • 33