Copy HTML from an original document into a popup window (using JQuery)

Question

This is my first post to stack overflow,... :) I like this site a lot!

My question: How do I copy an element from an opening page into a popup window using JQuery?

Here's what I have tried so far:

CopyToThisPageFromTheParent('#accordianResults');
function CopyToThisPageFromTheParent(querySelector) {
    var clone = $(querySelector, window.parent.document).clone();
    $('#testHtml').append(clone);
    alert($('#testHtml').html());
}

I've also tried:

    var clone = $('#accordianResults', window.parent.document).clone();
    alert($('#testHtml').html());

Thanks!

David

Answer 1

I had two problems with my JavaScript.

1. I was using window.parent.document instead of window.opener.document
2. For some reason the .append() syntax would not allow me to append the cloned object

Instead I had to use the .html() item hanging off of the JQuery selector to pass HTML out of the clone and into .append().

Here is the eventual end result:

CopyToThisPageFromTheParent('#accordion', '#testDiv');

function CopyToThisPageFromTheParent(openingWindowSelector, childWindowSelector) {
     var clone = $(openingWindowSelector, window.opener.document).clone(true);
     var theOuterHtml = clone.wrap('<div></div>').parent().html();
     $(childWindowSelector).append(theOuterHtml);
}

This is assuming I have this HTML:

<div id="testDiv"></div> 

on my popup window's page, and this HTML:

<div id="accordion">something</div> 

in my main page, and used "window.open();" to open up the popup window.

Thanks, David

Answer 2

You can just do:

$("#testHtml").html($(querySelector).html())