Multiple popup jquery dans boucle php

**Vincent Valentine** · 11/02/2016, 11h42

Bonjour, j'ai utilisé ce tuto pour créer des popup en JQ : http://sohtanaka.developpez.com/tuto...css-et-jquery/

Cela fonctionne très bien et c'est simple à mettre en place.

J'ai implanté la partie HTML du code dans une boucle PHP qui lit un fetch, pour générer une fenêtre modal par entrée du fetch, seulement, il ne prends en compte que la première fenêtre.
Les suivantes ont les id de la première, du coup le contenu ne change pas ...

Le JQ :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
jQuery(function($){
 
	//Lorsque vous cliquez sur un lien de la classe poplight
	$('a.poplight').on('click', function() {
		var popID = $(this).data('rel'); //Trouver la pop-up correspondante
		var popWidth = $(this).data('width'); //Trouver la largeur
 
		//Faire apparaitre la pop-up et ajouter le bouton de fermeture
		$('#' + popID).fadeIn().css({ 'width': popWidth}).prepend('<a href="#" class="close"><img src="images/close_pop.png" class="btn_close" title="Close Window" alt="Close" /></a>');
 
		//Récupération du margin, qui permettra de centrer la fenêtre - on ajuste de 80px en conformité avec le CSS
		var popMargTop = ($('#' + popID).height() + 80) / 2;
		var popMargLeft = ($('#' + popID).width() + 80) / 2;
 
		//Apply Margin to Popup
		$('#' + popID).css({ 
			'margin-top' : -popMargTop,
			'margin-left' : -popMargLeft
		});
 
		//Apparition du fond - .css({'filter' : 'alpha(opacity=80)'}) pour corriger les bogues d'anciennes versions de IE
		$('body').append('<div id="fade"></div>');
		$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn();
 
		return false;
	});
 
 
	//Close Popups and Fade Layer
	$('body').on('click', 'a.close, #fade', function() { //Au clic sur le body...
		$('#fade , .popup_block').fadeOut(function() {
			$('#fade, a.close').remove();  
	}); //...ils disparaissent ensemble
 
		return false;
	});
 
 
});
</script>

Le code PHP + HTML

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<?php 
		while($V_INFOS_FIN_C = $R_INFOS_FIN_C->fetch() ) {
			echo 'Fin de contrat de <a href="gestindi_avs_mod.php?id_avs='.$V_INFOS_FIN_C['id_avs'].'"target="_blank" title="Informations avs" alt="Informations avs">'.$V_INFOS_FIN_C['civilite_avs'].' '.$V_INFOS_FIN_C['nom_usage_avs'].' '.$V_INFOS_FIN_C['nom_famille_avs'].' '.$V_INFOS_FIN_C['prenom_avs'].'</a> le : <span class="rouge">'.date("d-m-Y", strtotime($V_INFOS_FIN_C['date_fin_contrat'])).'</span> <br /> '.'Etablissement ('.$V_INFOS_FIN_C['rne_etab'].') : '.$V_INFOS_FIN_C['denomination_etab'].', '.$V_INFOS_FIN_C['adresse_etab'].', '.$V_INFOS_FIN_C['commune'].'<br />'.' Direction : '.$V_INFOS_FIN_C['directeur_etab'].'<br />Tel : '.$V_INFOS_FIN_C['tel_etab'].'<br / > mail : ';
			if (((date('Y-m-d') - $V_INFOS_FIN_C['date_de_naissance_avs']) > '18250') OR ($V_INFOS_FIN_C['rqth_avs'] == 'OUI') OR (($V_INFOS_FIN_C['date_fin_contrat'] - $V_INFOS_FIN_C['date_debut_contrat']) < '729')) {
				//renouvelé -> Bilan annuel ?>
				<a href="#" data-width="750" data-rel="truc" class="poplight">Envoyer un rappel</a>
				<div id="truc" class="popup_block">
					<form action="./fonction/send_mail.php" method="post" name="envoimail">
						<input type="hidden" name="type_pj" value="fiche_projet_bilan_2014.pdf">
						<p><label>Destinataire : 	</label>	<input type"text" id="mail_etab1" 	name="mail_etab" 	value="<?php echo $V_INFOS_FIN_C['mail_etab'] ?>" disabled="disabled" size="50px"></p>
						<p><label>Copie à : 		</label>	<input type"text" id="mail_drh1" 	name="mail_drh" 	value="ce.xx@ac-nantes.fr" disabled="disabled" size="50px"></p>
						<p><label>Sujet :			</label>	<input type"text" id="sujet1" 		name="sujet" 		value="RENOUVELLEMENT CONTRAT" maxlength="200" size="50px"></p>
						<p><label>Pièce jointe : 	</label>	<input type"text" id="piecejointe1" name="piecejointe" 	value="fiche_projet_bilan_2014.pdf" disabled="disabled" size="50px"></p>
						<p>Message : <p/>
						<textarea id="msg1" name="msg"  style="height: 150px;" maxlength="1000"><?php echo 'Bonjour '.$V_INFOS_FIN_C['directeur_etab'].',nous vous informons que '.$V_INFOS_FIN_C['civilite_avs'].' '.$V_INFOS_FIN_C['nom_usage_avs'].' '.$V_INFOS_FIN_C['nom_famille_avs'].' '.$V_INFOS_FIN_C['prenom_avs'].' arrive au terme de son contrat le '.date("d-m-Y", strtotime($V_INFOS_FIN_C['date_fin_contrat'])).' Merci de faire le nécessaire. Le service DRH4' ?></textarea>
						<p><input type="submit" name="envoye" value="Envoyer" /></p>
					</form>
				</div> <br / ><br / >	
			<?php
			}
			else {
				//contrat non renouvelé -> attestation de compétence ?>
				<a href="#" data-width="750" data-rel="2" class="poplight">Envoyer un rappel</a>
				<div id="2" class="popup_block">
					<form action="./fonction/send_mail.php" method="post" name="envoimail">
						<input type="hidden" name="type_pj" value="attestation_de_competences.pdf">
						<p><label>Destinataire : 	</label>	<input type"text" id="mail_etab2" 	name="mail_etab" 	value="<?php echo $V_INFOS_FIN_C['mail_etab'] ?>" disabled="disabled" size="50px"></p>
						<p><label>Copie à : 		</label>	<input type"text" id="mail_drh2" 	name="mail_drh" 	value="ce.xx@ac-nantes.fr" disabled="disabled" size="50px"></p>
						<p><label>Sujet : 			</label>	<input type"text" id="sujet2" 		name="sujet" 		value="Fin de contrat AVS" maxlength="200" size="50px"></p>
						<p><label>Pièce jointe : 	</label>	<input type"text" id="piecejointe2" name="piecejointe" 	value="attestation_de_competence.pdf" disabled="disabled" size="50px"></p>
						<p>Message : <p/>
						<textarea id="msg2" name="msg"  style="height: 150px;" maxlength="1000"><?php echo 'Bonjour '.$V_INFOS_FIN_C['directeur_etab'].',nous vous informons que '.$V_INFOS_FIN_C['civilite_avs'].' '.$V_INFOS_FIN_C['nom_usage_avs'].' '.$V_INFOS_FIN_C['nom_famille_avs'].' '.$V_INFOS_FIN_C['prenom_avs'].' arrive au terme de son contrat le '.date("d-m-Y", strtotime($V_INFOS_FIN_C['date_fin_contrat'])).' Merci de faire le nécessaire. Le service DRH4' ?></textarea>
						<p><input type="submit" name="envoye" value="Envoyer" /></p>
					</form>
				</div> <br / ><br / >				
			<?php
			}
		}  ; ?>

Le code JQ se base sur le data-rel pour trouver la bonne popup, cependant, il applique un data-rel="1" et un id="1" sur la deuxième popup, du coup c'est le contenu de la première entrée qui est affiché, alors qu'on vient dans le code source que les noms sont différents.
Voici le code source issue du navigateur :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<div>
	<fieldset>
		Fin de contrat de <a 
			href="gestindi_avs_mod.php?id_avs=23"target="_blank" title="Informations avs" alt="Informations avs">Mme TROUILLAU  Morgane</a> le : <span class="rouge">29-02-2016</span> <br /> Etablissement (xxxxxx) : Collège André <br /> Direction : MME  IRENE<br />Tel : xx  <br / >mail : <a href="#" data-width="750" data-rel="1" class="poplight">Envoyer un rappel</a>
				<div id="1" class="popup_block">
					<form action="./fonction/send_mail.php" method="post" name="envoimail">
						<input type="hidden" name="type_pj" value="fiche_projet_bilan_2014.pdf">
						<p><label>Destinataire : </label><input type"text" id="mail_etab1" name="mail_etab" value="ce.xxxxxxx@ac-nantes.fr" disabled="disabled" size="50px"></p>
						<p><label>Copie à : </label><input type"text" id="mail_drh1" name="mail_drh" value="ce.xx@ac-nantes.fr" disabled="disabled" size="50px"></p>
						<p><label>Sujet : </label><input type"text" id="sujet1" name="sujet" value="RENOUVELLEMENT CONTRAT" maxlength="200" size="50px"></p>
						<p><label>Pièce jointe : </label><input type"text" id="piecejointe1" name="piecejointe" value="fiche_projet_bilan_2014.pdf" disabled="disabled" size="50px"></p>
						<p>Message : <p/>
						<textarea id="msg1" name="msg"  style="height: 150px;" maxlength="1000">Bonjour MME IRENE,nous vous informons que Mme TROUILLAU  Morgane arrive au terme de son contrat le 29-02-2016 Merci de faire le nécessaire. Le service DRH4</textarea>
						<p><input type="submit" name="envoye" value="Envoyer" /></p>
					</form>
				</div> <br / ><br / >Fin de contrat de <a 
			href="gestindi_avs_mod.php?id_avs=14"target="_blank" title="Informations avs" alt="Informations avs">Mme BARBIER  Aude</a> le : <span class="rouge">28-02-2016</span> <br /> Etablissement (xxxxxx) : Collège Marin<br /> Direction : M. ERIC<br />Tel : xx   <br / >mail : <a href="#" data-width="750" data-rel="1" class="poplight">Envoyer un rappel</a>
				<div id="1" class="popup_block">
					<form action="./fonction/send_mail.php" method="post" name="envoimail">
						<input type="hidden" name="type_pj" value="fiche_projet_bilan_2014.pdf">
						<p><label>Destinataire : </label><input type"text" id="mail_etab1" name="mail_etab" value="ce.xxxxxx@ac-nantes.fr" disabled="disabled" size="50px"></p>
						<p><label>Copie à : </label><input type"text" id="mail_drh1" name="mail_drh" value="ce.xx@ac-nantes.fr" disabled="disabled" size="50px"></p>
						<p><label>Sujet : </label><input type"text" id="sujet1" name="sujet" value="RENOUVELLEMENT CONTRAT" maxlength="200" size="50px"></p>
						<p><label>Pièce jointe : </label><input type"text" id="piecejointe1" name="piecejointe" value="fiche_projet_bilan_2014.pdf" disabled="disabled" size="50px"></p>
						<p>Message : <p/>
						<textarea id="msg1" name="msg"  style="height: 150px;" maxlength="1000">Bonjour M. ERIC,nous vous informons que Mme BARBIER  Aude arrive au terme de son contrat le 28-02-2016 Merci de faire le nécessaire. Le service DRH4</textarea>
						<p><input type="submit" name="envoye" value="Envoyer" /></p>
					</form>
				</div> <br / ><br / >		<br />
			</fieldset>
</div>

Merci de votre éclairage sur ce petit truc.

**NoSmoking** · 11/02/2016, 19h47

Bonjour,
une ID doit ETRE UNIQUE, or tu les dupliques dans ton code.

**Vincent Valentine** · 11/02/2016, 20h55

Justement, dans mon code PHP, mes idées, son unique (1, 2, etc) (code PHP)
Mais au final, une fois que je regarde le code obtenue, elles ne le sont plus (code html final)
Donc, j'en déduis qu'au moment où le code se compile, y a un truc qui cloche et qui me met des id identiques partout.

**Vincent Valentine** · 12/02/2016, 08h54

Merci, je m'étais focalisé sur les id du div de la popup.
Mauvais copier collé pour les id des input :-(
J'ai aussi repérer une condition php qui mettait le bazar, maintenant ça marche beaucoup mieux, merci !

Multiple popup jquery dans boucle php

jQuery

Discussions similaires

Partager

Partager