Copying the contents of a div and paste it to the Preview window using JQuery

Question

Hi,

i am creating a pop-up window and i want to show the contents of a Div in the pop-up window.How to copy the contents of the Background WIndow and to make them to append it to pop-up window .Since i want to show the same preview of the backend panel in the pop-up window .How to do so.

WHere, my background panel is

 <div id="fb_contentarea_down21">
      <div id="field1">
         <input id="input1"></input>
      </div>
      <div id="field2">
        <textarea id="input2"></textarea>
      </div>
 </div>

And i want to show these things(background) to the Preview window how to do so. the following is the Pop-up window..

   <div id="popupContact" style="position: absolute; top: 208px; left: 436px; display: none;">
 <a id="popupContactClose">x</a>
 <h1>Title of our cool popup, yay!</h1>
 <p id="contactArea">

 </p>
</div>

How to show the contents of fb_contentarea_down21 in the ContactArea...

Answer 1

i think you want the clone function for this. clone the item into your popup

$("#fb_contentarea_down21").clone().appendTo($("#ContactArea"));

the *.clone() function can also recieve a bool parameter so if you are cloning an item which has events (like a button with a click event) passing true will also include the event.

edit after comment from redsquare

after doing a clone you will need to replace all the id's of the newly created items. because cloning would result in multiple elements with the same ID.

another posibility would be to open up an iframe in your popup and using the clone or .load() to copy the items into your popup.

Answer 2

You can clone the fragment and append it inside of the popup.

$('#fb_contentarea_down21').clone().appendTo('#contactArea');

The only issue is that you will end up with duplciate id's in the dom which is not valid and will start playing havoc with your selectors. So you will have to rename all the id's which can get messy

Best thing to do is append the fragment and when you close the popup append the fragment back

 $('#fb_contentarea_down21').children().appendTo('#contactArea');

then when closing popup

 $('#contactArea').children().appendTo('#fb_contentarea_down21');

Answer 3

For just showing the text inside the inputs, not clones of the inputs:

$('#contactArea').text(
    $('#fb_contentarea_down21 input').val() +
    $('#fb_contentarea_down21 textarea').val()
)