J'aimerai afficher un "reveal" (modal) après la soummission d'un formulaire en ajax.

30 mars 2022, 12:10

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>

30 mars 2022, 12:32

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

30 mars 2022, 13:06

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.

30 mars 2022, 13:11

Bonjour,
pour simplifier il faut que tu mettes une écoute sur le bouton onSubmit .

30 mars 2022, 13:20

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)

30 mars 2022, 13:49

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>

30 mars 2022, 13:53

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.

30 mars 2022, 13:57

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.

31 mars 2022, 12:38

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.

J'aimerai afficher un "reveal" (modal) après la soummission d'un formulaire en ajax.

Qui est en ligne