Copier le contenu d'un div et le coller dans la fenêtre de prévisualisation à l'aide de JQuery

Question

Je crée une fenêtre pop-up et je souhaite afficher le contenu d'une div dans la fenêtre pop-up .Comment copier le contenu du fichier? Fond WIndow et de les faire pour l'ajouter à la fenêtre pop-up. Depuis que je veux afficher le même aperçu du panneau backend dans la fenêtre pop-up .Comment faire.

où, mon panneau de fond est

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

Et je veux montrer ces choses (arrière-plan) à la fenêtre d'aperçu comment le faire. ce qui suit est la fenêtre pop-up ..

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

Comment afficher le contenu de fb_contentarea_down21 dans le ContactArea ...

Answer 1

Vous pouvez cloner le fragment et l'ajouter à l'intérieur de la fenêtre contextuelle.

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

Le seul problème est que vous finirez avec id duplciate dans ce dom qui est pas valable et va commencer à jouer des ravages avec vos sélecteurs. Donc, vous devrez renommer tous les id qui peuvent obtenir désordre

La meilleure chose à faire est append le fragment et lorsque vous fermez la fenêtre contextuelle append le fragment retour

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

puis lors de la fermeture pop-up

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

Answer 2

je pense que vous voulez que la fonction clone pour cela. clone l'élément dans votre pop-up

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

la * fonction .clone() peut également recevoir un paramètre bool donc si vous le clonage d'un élément qui a des événements (comme un bouton avec un événement click) passage vrai inclura également l'événement.

modifier après commentaire de redsquare

après avoir fait un clone, vous devrez remplacer tous les id des éléments nouvellement créés. car le clonage aboutirait à plusieurs éléments avec le même ID.

une autre possibilité serait d'ouvrir un iframe dans votre popup et en utilisant le clone ou .load() pour copier les éléments dans votre popup.

Answer 3

Pour seulement montrer le texte à l'intérieur des entrées, non clones des entrées:

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