Copy HTML from source document to popup (using jQuery)

Question

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

My question is: how to copy an element from the start page to a popup using jQuery?

Here is 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 also tried:

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

Thanks!

David

Answer 1

I had two problems with my JavaScript.

• I used window.parent.document instead of window.opener.document
• For some reason, the .append () syntax prevents me from adding a cloned object

Instead, I had to use the .html () element hanging from the JQuery selector to pass the HTML from the clone to .append ().

Here is the 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 assumes that I have this HTML:

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

on my popup page, and this HTML:

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

on my main page and used " window.open(); " to open a popup.

Thanks David

Answer 2

You can simply do:

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

Answer 3

I'm not sure what it is:

$(querySelector, window.parent.document)

$ will select from the whole DOM by default. This is functionally identical:

$(querySelector)

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