Discussion :

[Midsou]

Bonjour,

a l'ouverture d'un modal bootstrap, je fais un appel ajax pour appeler un script php et intégrer un formulaire dans mon modal. Je fais cette appel ajax car je dois passer des paramètres propres au modal qui se trouve dans une boucle.
Ensuite, j'utilise un autre appel ajax au submit du formulaire, mais il ne fonctionne pas.
Si j'écris le code du formulaire directement dans mon modal (qui se trouve donc chargé au premier lancement de la page) mon script ajax qui valide le formulaire fonctionne.

Comment faire pour exécuter un script ajax après un appel ajax qui aurait été chargé préalablement avec la page php?

1er appel ajax chargé lors de l'ouverture du modal

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
 
<script>
	$('#testModal').on('show.bs.modal', function(e) {
	var $modal = $(this),
            idClient = e.relatedTarget.id;
 
		$(".modal-body").fadeIn(1000).html('<div style="text-align:center; margin-right:auto; margin-left:auto">Patientez...</div>');
		$.ajax({
			type:"GET",
			data : "idClient="+idClient,
			url:"formulaire.php",
			error:function(msg){
				$(".modal-body").addClass("tableau_msg_erreur").fadeOut(800).fadeIn(800).fadeOut(400).fadeIn(400).html('<div style="margin-right:auto; margin-left:auto; text-align:center">Impossible de charger cette page</div>');
			},
			success:function(data){
				$(".modal-body").fadeIn(1000).html(data);
			}
		});
	});
</script>

2eme appel ajax

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
 
<script>
 
$(document).ready(function(){
	$("#formulaire").submit(function(){
		$.ajax({type:"POST", data: $(this).serialize(), url:"FormAjax.php", 
			success: function(data){
				$("#post").html(data);
			},
                        error: function(){
			        $("#post").html('Une erreur est survenue.');
			}
		});
		return false;
	});
});
 
</script>

Les deux scripts se trouvent dans la même page php

[mathieu]

Si au chargement de le page, l'élément "#formulaire" n'existe pas encore, alors $("#formulaire") ne retournera rien et donc l'évènement ne pourra pas y être accroché.
Dans ce cas, il faut donc attacher la fonction à "document" comme cela :

Code :

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

1
2
$(document).on("submit", "#formulaire", function () {
...

[Midsou]

Effectivement c'est logique ! Merci ca fonctionne parfaitement