Multiple popup jquery dans boucle php
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:
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:
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:
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.
