Construction d'un formulaire depuis un popup Fille vers une page Mère

Bonjour à tous,

Le Javascript, c'est mon point faible, et je le ressens encore aujourd'hui...

Voilà ce que je voudrais faire :
- Depuis une page mère, on appelle un popup (jusque-là, je m'en suis sorti ;) )
- Dans la page fille, c'est une liste d'éléments qui apparait.
- Depuis la page fille, je souhaiterais pouvoir « construire » un formulaire dans la page mère (avec des input:hidden pour transmettre des id, mais aussi du HTML pour ajouter des éléments de décor) en cliquant sur les éléments listés.
- Enfin, on envoie le formulaire de la page mère et le popup fille se ferme.

Pour m'aider, je suis tombé sur ce sujet, mais honnêtement, pour ce qui est du JS je suis au ras des pâquerettes !

Une bonne âme pour m'aider ?

Merci d'avance !

vous n'avez pas besoin d'ouvrir une nouvelle fenêtre.
vous vous en sortirez mieux en restant sur la même page avec cela par exemple :
http://jqueryui.com/dialog/#animated

Oui, effectivement, ça aurait été une solution... pour une petite liste d'éléments.
Mais il se trouve que c'est tout l'espace de stockage de l'utilisateur qui se retrouve dans le popup, avec la possibilité d'uploader des fichiers, d'en supprimer, de les trier, les renommer... Je fais donc appel à plusieurs pages pour toutes ces fonctions, d'où l'usage d'une fenêtre popup :)

La popin me semble en effet être une meilleure solution.
Couplé a de l'ajax

Bonjour à tous deux,

Malheureusement, je ne suis pas encore au niveau pour l'AJAX. Je garde votre idée de popin pour plus tard, quand j'en saurai davantage sur le sujet.
Toutefois, j'ai réussi à bricoler quelque chose en fouillant dans quelques cours de JS. J'ai encore UNE chose qui ne marche pas :

Oiuverture du popUp : OK
Ajout des fichiers choisis dans la page mère : OK
Apparition / Disparition du formulaire de la page mère en fonction de la présence de fichiers : OK
Apparition / Disparition du bouton de « Lier » des fichiers dans le pop Up en fonction de la présence du fichier dans le formulaire de la page mère : OK
Suppression de fichiers sélectionnés depuis le formulaire de la page mère : PARTIEL

Pour le dernier point, voici le problème. Quand je reste sur la première page de mon Pop Up, tout fonctionne : je peux ajouter et/ou supprimer des fichiers à ma guise depuis le pop up ou la page mère.
MAIS ! Si dans le pop up je charge une autre page de l'espace de stockage (ajout d'un fichier, suppression d'un fichier, édition...), alors le bouton de suppression de fichier de la page mère ne fonctionne plus.

HTML Page Mère

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
		<form id="form-fichiers-joints" action="xxxxx.php" method="post" >
			<!-- input:hidden pour la bdd-->
			<p 	onclick="
				var popEs = OuvrirPopup(	'pop_es.php', 
							'EStockage',
							'directories=no, resizable=yes, location=no, width=650, height=500, menubar=no, status=no, scrollbars=yes, menubar=no')" 
			class="bouton bouton_file">
				Choisissez un fichier dans votre espace de stockage
			</p>
 
			<table class="liste_content" id="liste-fichiers-joints" style="display:none;">
				<tbody>
					<tr class="liste_row en_tete" >
						<th class="liste_cell small"></th>
						<th class="liste_cell grand">Nom du fichier</th>
						<th class="liste_cell small">Ext.</th>
					</tr>
				</tbody>
			</table>
 
			<input type="submit" value="Joindre" class="bouton" style="display:none" />
		</form>

JS Page Mère

Code:

1
2
3
4
5
 
		// Fonction d'ouverture de PopUp
		function OuvrirPopup(page, nom, option) {
			window.open(page, nom, option);
		}

HTML Pop UP

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
 
	<table class="liste_content">
		<tr class="liste_row en_tete" >
			<th class="liste_cell small">
			</th>
			<th class="liste_cell medium">
			</th>
			<th class="liste_cell grand">
				Nom
			</th>
			<th class="liste_cell small">
				Date
			</th>
			<th class="liste_cell small">
			</th>
		</tr>
 
		<tr class="liste_row" >
			<td class="liste_cell small">
				<a href="xxxxx.php?xxxxx=xxxxx#MENU" title="Supprimer ce fichier" >
					<img src="design/cross.png" alt="Supprimer" />
				</a>
				<a href="xxxxx.php?xxxx=xxxxx#MENU" title="Éditer les informations du fichier" >
					<img src="design/pen.png" alt="Éditer" />
				</a>
			</td>
			<td class="liste_cell medium">';
				<img src="design/fichier_small.png" alt="extension" title="Extension du fichier"  />
			</td>
			<td class="liste_cell grand">
				<a href="xxxxx.php?xxxxx=xxxxx#MENU" title="Détails du fichier" >NOM DU FICHIER</a>
			</td>
			<td class="liste_cell small">
				DATE D'UPLOAD
			</td>
			<td class="liste_cell small">
				<a onClick="sendValue(this, 'xxxxx', 'NOM DU FICHIER', EXT);" class="bouton lier_fichier" id="fichier-xxxxx" title="Joindre ce fichier"  >Lier</a> 
			</td>
		</tr>';
	</table>

JS Pop UP

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
 
		var fenetreMere = window.opener.document;
 
		var tableListe = fenetreMere.getElementById('liste-fichiers-joints'); 	// Le tableau qui liste les fichiers sélectionné
		var tbody = tableListe.firstChild.nextSibling; 							// le tbody du tableau
 
		var formListe = fenetreMere.getElementById('form-fichiers-joints'); 	// Le formulaire d'envoi des fichiers à joindre
		var boutonEnvoi = formListe.lastChild.previousSibling;
 
		// Fonction pour insérer le fichier dans le formulaire de lien de fichier avec un élément du site
		function sendValue (s, VARID, nomFichier, extFichier){
 
			if (tableListe.style.display == 'none'){ // On teste la visibilité du tableau / Si pas visible, on affiche.
				tableListe.style.display = 'table';
			}
 
			// On vérifie si le fichier est déjà sélectionné
			if(!fenetreMere.getElementById('fichier-'+VARID)){
 
				if (boutonEnvoi.style.display == 'none'){ // On teste la visibilité du bouton d'envoi / Si pas visible, on affiche.
					boutonEnvoi.style.display = 'inline';
				}
 
				// xxxx INPUT DU FOMULAIRE xxxx
					var input = fenetreMere.createElement('input'); 	// On crée l'élément input
						input.setAttribute('type', 'hidden'); 			// Il est caché
						input.name 	= 'varform[]'; 				// 
						input.value = VARID; 						// 
				// xxxx  xxxx
 
 
				// xxxx CONTENU DU TABLEAU xxxx
					// TR ===========
					var newTR = fenetreMere.createElement('tr'); 	// On crée une ligne de tableau
						newTR.className = "liste_row"; 				// On ajoute la classe des lignes
						newTR.className += " small"; 				// On ajoute la classe des lignes
						newTR.id = "fichier-"+VARID; 			// On ajoute la classe des lignes
 
						// TD1 +++++++ Bouton de suppression
						var newTD1 = fenetreMere.createElement('td'); 	// On crée la première cellule du tableau
							newTD1.className = "liste_cell"; 			// On ajoute la classe des cellules
 
 
							// Bouton de suppression
							var newBouton = fenetreMere.createElement('input'); // On crée le bouton de suppression de la liste des fichiers à joindre
								newBouton.className = "bouton";					// Il a la classe « bouton »
								newBouton.setAttribute('type', 'button'); 		// C'est un bouton
								newBouton.value= 'X'; 							// Il est marqué « Suppr. »
								newBouton.addEventListener('click', function(e) { // Ajout d'un évènement
 
									var ligneFichier = e.currentTarget.parentNode.parentNode;
 
									// Suppression de la ligne dans le tableau
									ligneFichier.parentNode.removeChild(ligneFichier); 
 
									var count = 0; // Variable pour faire le compte des enfants
									var childTable = tbody.childNodes;
 
									// On parcourt tous les enfants du tableau
									for (var i = 0, c = childTable.length; i < c; i++) {
										if (childTable[i].nodeType === Node.ELEMENT_NODE) { // C'est un élément HTML
											count++;
										} 
									}
 
									// On enlève 1 à count à cause de l'en-tête du tableau
									count = count -1;
 
									if(count == 0) { // S'il n'y a plus de ligne, on fait disparaître le tableau et le bouton d'envoi
										tableListe.style.display = 'none';
										boutonEnvoi.style.display = 'none';
									}
								});
 
						// TD2 +++++++ Nom du fichier
						var newTD2 = fenetreMere.createElement('td'); 	// On crée la deuxième cellule du tableau
							newTD2.className = "liste_cell"; 			// On ajoute la classe des cellules
							newTD2.className += " grand"; 				// C'est une grande cellule
 
							// Nom du fichier
							var nomfichierTXT = fenetreMere.createTextNode(nomFichier); // Texte contenant le nom du fichier
 
 
						// TD3 +++++++ Extension du fichier
						var newTD3 = fenetreMere.createElement('td'); 	// On crée la troisième cellule du tableau
							newTD3.className = "liste_cell"; 			// On ajoute la classe des cellules
							newTD3.className += " small"; 				// C'est une petite cellule
 
							// Extension
							var extfichierTXT = fenetreMere.createTextNode(extFichier); // Texte contenant l'extension du fichier
 
							newTD1.appendChild(newBouton); 				// On ajoute le bouton dans la cellule 1
							newTD2.appendChild(nomfichierTXT); 			// On ajoute le nom du fichier dans la cellule 2
							newTD2.insertBefore(input, nomfichierTXT); 	// On l'input du fichier avant le nom, dans le tableau
							newTD3.appendChild(extfichierTXT); 			// On ajoute l'extension dans la cellule 3
 
						newTR.appendChild(newTD1); // On ajoute la cellule 1 à la ligne
						newTR.appendChild(newTD2); // On ajoute la cellule 2 à la ligne
						newTR.appendChild(newTD3); // On ajoute la cellule 3 à la ligne
					tbody.appendChild(newTR); // On ajoute la nouvelle ligne du tableau
				// xxxx  xxxx	
 
			}
 
			// On supprime le lien « Lier » dans le popup si le fichier est dans le tableau des fichiers que l'on souhaite joindre
			if(fenetreMere.getElementById('fichier-'+VARID)){
				s.style.display = 'none';
			}
 
		}
 
		// Suppression des liens « Lier » si le fichier est déjà sélectionné dans le tableau de la fenêtre mère
		var aLiens = document.querySelectorAll('a.lier_fichier'); // Tableau des liens dans le popup
		for (var i = 0, c = aLiens.length ; i < c ; i++) {
 
			idLien = aLiens[i].id; // On récupère l'idée du lien
 
			if(fenetreMere.getElementById(idLien)){ // Si on trouve l'id du fichier dans la fneêtre mère, on supprime le lien pour lier le fichier
				aLiens[i].style.display = 'none';
			}
 
		}
 
		// Pour que la fenêtre popup soit toujorus au dessus, ou bien soit fermée au moment du passage à une autre fenêtre
		function focusFunction() {
			if (navigator.userAgent.indexOf('MSIE') > -1) {
				self.focus();
			} else {
				self.close();
			}
		}

Si vous arrivez à voir d'où ça vient, je vous en serai grandement reconnaissant.
Merci d'avance.