Page 1 sur 1
J'aimerai afficher un "reveal" (modal) après la soummission d'un formulaire en ajax.
Posté : 30 mars 2022, 12:10
par kevinIsAJoke
Il s'agit plus d'un problème en JS qu'en PHP...
Mon script php fonctionne mais le contenu dynamique se trouvant dans mon reveal (foundation) / modal (bootstrap) ne s'affiche que si je rafraîchis la page.
Voici le code qui fonctionne mais ne lance pas ma reveal.
(l'action du form se fait sur la même page c'est pour ca que j'ai pas mis URL dans le script.)
Code : Tout sélectionner
<script>
$(document).ready(function() {
$('form.more-info').on('submit', function(e) {
e.preventDefault();
$.ajax({
type: 'post',
data: $(this).serialize(),
success: function() {
alert("Ok !")
},
error: function() {
alert('Aie !');
}
});
});
});
</script>
Re: J'aimerai afficher un "reveal" (modal) après la soummission d'un formulaire en ajax.
Posté : 30 mars 2022, 12:32
par ynx
Bonjour,
Comment est déclenché l'affichage de la modal ?
A priori, il faudrait remplacer dans ton code le alert("Ok !") par l'affichage de la modal bootstrap :
https://getbootstrap.com/docs/5.1/compo ... odal/#show
Re: J'aimerai afficher un "reveal" (modal) après la soummission d'un formulaire en ajax.
Posté : 30 mars 2022, 13:06
par kevinIsAJoke
En fait j'utilise Foundation 6 et non Bootstrap.
En faisant ceci, ça marche mais je rafraîchis alors la page.
J'ai l'impression que la "reveal" se lance et se ferme tout de suite et ensuite la page se recharge et la reveal apparait.
Code : Tout sélectionner
<script>
$(document).ready(function() {
$('.reveal').foundation('open');
$('form.more-info').on('submit', function(e) {
// e.preventDefault();
$.ajax({
type: 'post',
data: $(this).serialize(),
success: function() {
$('.reveal').foundation('open');
e.preventDefault();
},
error: function() {
// alert('Aie !');
}
});
});
});
</script>
Ce refresh m'ennuie et en plus j'ai parfois une alerte "voulez vous renvoyer ce formulaire" qui se lance après.
Re: J'aimerai afficher un "reveal" (modal) après la soummission d'un formulaire en ajax.
Posté : 30 mars 2022, 13:11
par GuillaumeLM
Bonjour,
pour simplifier il faut que tu mettes une écoute sur le bouton
onSubmit .
Re: J'aimerai afficher un "reveal" (modal) après la soummission d'un formulaire en ajax.
Posté : 30 mars 2022, 13:20
par ynx
Pourquoi avoir déplacer le e.preventDefault(); après l'affichage de la modal ?
Il faut bien le laisser au début de ta fonction lié à l'événement submit comme dans ton premier code pour éviter que le formulaire soit envoyé via le navigateur (d'où le rafraichissement de la page non voulu)
Re: J'aimerai afficher un "reveal" (modal) après la soummission d'un formulaire en ajax.
Posté : 30 mars 2022, 13:49
par kevinIsAJoke
Pourquoi avoir déplacer le e.preventDefault(); après l'affichage de la modal ?
Il faut bien le laisser au début de ta fonction lié à l'événement submit comme dans ton premier code pour éviter que le formulaire soit envoyé via le navigateur (d'où le rafraichissement de la page non voulu)
Comme ceci ?
Code : Tout sélectionner
<script>
$(document).ready(function() {
$('.reveal').foundation('open');
$('form.more-info').on('submit', function(e) {
e.preventDefault();
$.ajax({
type: 'post',
data: $(this).serialize(),
success: function() {
$('.reveal').foundation('open');
},
error: function() {
// alert('Aie !');
}
});
});
});
</script>
Re: J'aimerai afficher un "reveal" (modal) après la soummission d'un formulaire en ajax.
Posté : 30 mars 2022, 13:53
par kevinIsAJoke
Le truc c'est que le formulaire est dupliqué plusieurs fois dans la page et il affiche à chaque fois la même "reveal" (modal) mais avec une info différente.
Re: J'aimerai afficher un "reveal" (modal) après la soummission d'un formulaire en ajax.
Posté : 30 mars 2022, 13:57
par kevinIsAJoke
Le truc c'est que le formulaire est dupliqué plusieurs fois dans la page et il affiche à chaque fois la même "reveal" (modal) mais avec une info différente.
Quand je laisse le e.preventDefault(); la modal affiche toujours la meme info (premiere fois que je clique sur la page) et quand je le masque, il y a un refresh de la page mais l'info dans le modal change correctement.
Re: J'aimerai afficher un "reveal" (modal) après la soummission d'un formulaire en ajax.
Posté : 31 mars 2022, 12:38
par ynx
Si tu souhaites que le formulaire soit soumis via la requête ajax sans rechargement de la page, il faut bien laisser preventDefault() comme dans ton premier code.
Comment est défini le contenu de la modal, il dépend du retour de la soumission du formulaire ? Si oui, il faut alors récupérer le retour de la requête ajax afin de modifier le contenu de la modal avant de l'afficher.