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

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

• javascript
• jquery
• popup
• copy
• clone

Share Improve this question Follow edited May 10, 2011 at 22:34 David asked Apr 22, 2011 at 16:46 DavidDavid 23311 gold badge33 silver badges99 bronze badges 2

• I got this code working, so I guess I should mark it as an answer below so I can show you what I ended up doing? – David Commented Apr 22, 2011 at 19:34
• You mark the correct answer with a checkmark – locrizak Commented Apr 22, 2011 at 22:19

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

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

You can just do:

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

I'm not sure what this is about:

$(querySelector, window.parent.document)

$ will select from the entire DOM by default. That is functionally identical to:

$(querySelector)

Your code, actually, looks like it should work, assuming the selectors are correct for things on your page.