multiple modal dans une page
Bonjour,
ma page possede plusieurs modal bootstrap. Je souhaite recharger une div de cette page a chaque fermeture de modal via un appel ajax. Pour gérer distinctement les id de chaque modal, j'effectue une boucle sur mon script et je vais chercher via la methode children l'id du modal généré dans une balise span. Le probleme c'est que je ne recuperer que le premier children. Du coup mes deux scripts se retrouvent avec l'id #modal1 et du coup il y a conflit.
Je pense clairement qu'il y a une solution plus simple. Voici mon code :
La page qui est appellée par un script ajax au chargement et qui doit etre rechargé a chque cloture du modal.
[code]
<div id="div2"><?php echo rand(10,100); ?></div>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#modal1">Open Modal</button>
<!-- Modal -->
<div id="modal1" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
....
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#modal2">Open Modal</button>
<!-- Modal -->
<div id="modal2" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
....
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<?php
for($k=1;$k<=2;$k++){
?>
<div class="modalIdBoucle" id="#modal<?php echo $k; ?>" rel="<?php echo $k; ?>">
<span class="#modal<?php echo $k; ?>"></span>
<script>
var modal = $('div.modalIdBoucle').children().attr('class');
alert(modal);
$(modal).on('hidden.bs.modal', function(){
$('#relaoadDiv').load('tableauTest.php');
});
</script>
</div>
<?php } ?>`
<dv id="div2"><?php echo rand(10,100); ?></div>
Et a page principale qui appelle les modal :
<html>
<head>
<link rel="stylesheet" href="bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="bootstrap.js"></script>
<script>
$(document).ready(function() {
$("form").submit(function () {
$.post("updateModifNote.php",$(this).serialize(),function(texte){
$("div#status").append(texte);
});
return false; // ne change pas de page
});
});
</script>
</head>
<body>
<div class="container">
<section>
<div id="reloadDiv"></div>
</section>
</div>
<script>
$(window).load(function(){
$('#reloadDiv').load('tableauTest.php');
});
</script>
</body>
</html>Si vous avez une piste ou une autre solution je suis preneur.
Merci d'avance
2 réponses
Bonjour.
Pourquoi tu as du code Javascript dans ta boucle PHP ?
<?php for($k=1;$k<=2;$k++) { ?>
<div class="modalIdBoucle" id="#modal<?php echo $k; ?>" rel="<?php echo $k; ?>">
<span class="#modal<?php echo $k; ?>"></span>
<script>
var modal = $('div.modalIdBoucle').children().attr('class');
alert(modal);
$(modal).on('hidden.bs.modal', function() {
$('#relaoadDiv').load('tableauTest.php');
});
</script>
</div>
<?php } ?>Si encore tu utilisais le PHP pour modifier une valeur dans le Javascript, ça pourrait servir à quelque chose, mais tu as toujours les mêmes sélecteurs dans ton code Javascript.
Surtout que ta boucle PHP ne sert à rien vu quelle ne fait qu'un seul tour, vu que tu lui dis :
Tu commences à 1 et lorsque la valeur est égale à 2 tu stoppes
Mais vu que dès le premier tour de boucle la valeur est déja égale à 2, elle n'a aucune utilité.
En plus de ça, tu te retrouve avec deux éléments qui ont l'ID modal2, une modale et la div qui est dans la boucle PHP.
Sans compter que tu as les deux pages qui chargent la page tableauTest.php.
Et a page principale qui appelle les modal :
Tu ne peux pas intérargir avec des modales qui sont sur d'autres pages de cette manière et si je comprends bien, le premier bloc correspond à la deuxième page, qui fait appel à la page tableauTest.php dès le chargement et la seconde page, fait également appel à la page tableauTest.php ?
Pour schématiser un peu :
- 2ème bloc = Page A
- 1er bloc = Page B
La page A doit intérargir avec les modales qui sont sur la page B, et ces deux pages font appel à la page tableauTest.php.
Mais ou se situe la page tableauTest.php dans tout ça ?
Effectivement c'est pas très propre de mettre du js dans une boucle php. Du coup, j'ai résolu mon probléme en bouclant dans mon js après avoir parser et recupéré la valeur de $i.
Ca donne ca :
<div class="modalIdBoucle"><div class="<?php echo $i; ?>"></div></div>
<script>
var id = $('.modalIdBoucle').children().attr('class');
for (var i=1; i<=id; i++) {
$("#myModal"+i).on('hidden.bs.modal', function(){
$('#reloadDiv').load('testTraitement.php');
});
}
</script>