Discussion :

[Phpx1]

Bonjour,

Je saisi un formulaire et une fois validé (submit) , il appelle une fonction J.S qui

1- Affiche un message "Enregistrement créée" durant 5 "

2- Rappelle le même script pour réafficher le formulaire de saisie


Au départ, j'avais juste mis la 1ère action (affichage du msg) qui fonctionne parfaitement qui affiche bien le message pendant le temps indiqué .
MAIS dès que j'ai rajouté la seconde action (Rappel du même script) , je n'ai eu à peine le temps de voir s'afficher le message... c'est comme si la 2ème action démarrait alors que la 1ère n'était pas encore terminée (C'est ce que j'en ai déduit ??).

J'ai regardé pas mal sur le Net pour tenter de trouver une solution, on parle souvent de callback (retour de fonction) mais je ne sais pas comment l'implanter ds mon code, (Dois je rajouter une fonction (avec callback) pour chaque action sous la fonction (data) ??).
J'ai vu une autre solution avec .trigger() mais je n'ai pas tout compris....;-)) .
Je vois ai joint un extrait du code.
Merci bcp pour votre aide !!

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
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
 <script type='text/javascript'>
 
      $(document).ready(function(){
 
         $("form.formulaire").submit(function(e){
               e.preventDefault();
 
 
              $.post(
                'ajout2.php',
                 {
                 num      : $("#num").val(),
                 titre    : $("#titre").val(),
                 genre    : $("#Genre").val(),
                 duree    : $("#duree").val(),
                 annee    : $("#annee").val()
                 },
 
                 function(data)
                 {
 
 
                   if ('succes' == data.trim())
                      {
 
                        document.getElementById('msgfoot').style.visibility = "visible";
 
                        setTimeout( function()
                          {
                           var oMsg = document.getElementById("msgfoot");
                           oMsg.style.visibility = "hidden";
                          }, 5000);
 
 
             //   Redirection vers la meme page (les champs à vide (a saisir de nouveau)
                         window.location.replace("ajout1.php");
 
                      }
                   else{
 
			  console.log("ERROR");
                       }
                },
                 'text'
               );
           });
      });
 
 
 
 </script>

[NoSmoking]

Bonjour,

c'est comme si la 2ème action démarrait alors que la 1ère n'était pas encore terminée (C'est ce que j'en ai déduit ??).

bonne déduction car les fonctions s'enchaînent et la méthode setTimeout ne fait que différer l'action, c'est ce que tu demandes à ton script

Code :

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

1
2
3
4
5
6
7
8
9
// exécutera dans 5s
setTimeout(function () {
    var oMsg = document.getElementById("msgfoot");
    oMsg.style.visibility = "hidden";
}, 5000);
// Redirection vers la meme page (les champs à vide (a saisir de nouveau)
// s’exécute immédiatement donc n'attend pas 
window.location.replace("ajout1.php");
}

Tu pourrais tout simplement faire

Code :

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

1
2
3
setTimeout(function () {
    window.location.replace("ajout1.php");
}, 5000);

la page se rechargera tout bêtement.

Là ou je suis surpris c'est par ton commentaire

// Redirection vers la meme page (les champs à vide (a saisir de nouveau)

pourquoi ne pas, dans se cas, faire un reset() du formulaire !?!

[Phpx1]

Merci encore NoSmoking de me répondre!

Au départ, effectivement, je pensais que les actions s'enchainaient logiquement (séquentiellement) mais apparemment ça ne fonctionne pas de la sorte.
Si j'ai bien compris , il faut que je rajoute un setTimeout pour l'appel au script avec le même délai que pour l'affichage du message .
En fait les 2 actions se font en //. (Je n'ai donc pas à m'embêter avec les callback)

Concernant le rappel à mon script , je le fais car j'ai un traitement en début (doit récupérer une donnée en BDD).
Lorsque tu parles du reset(), c'est juste initialiser les champs ?

[Phpx1]

Bonjour,

Comme actuellement je n'ai pas l'environnement nécessaire (config. complète ,jquery,....) pour continuer mes tests.
J'ai fait un test (en version dégradé) (sur ma tablette) avec juste un peu de html et javascript en reproduisant juste le principal (affichage du msg + rappel au script) ,

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
21
22
23
24
25
 <script type="text/javascript">
 
                function Val()
                 {
 
                   document.getElementById("msgfoot").style.visibility = "visible"; 
 
 
                 setTimeout( function()
                   {
                    var oMsg = document.getElementById("msgfoot");
                    oMsg.style.visibility = "hidden";
                   }, 5000);
 
                //   Redirection vers la meme page 
 
                     setTimeout( function()
                     {
                    window.location.replace("ajout1.html");
                     }, 5000 );   
 
                   }
 
 
           </script>

Mais j'ai eu le même pb, je ne vois plus l'affichage du msg (le chargement du script se fait bien).

Par contre, j'ai rajouté sur le onsubmit (validation du formulaire) un return false après l'appel de la fonction:

Code :

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

onsubmit="Val();return false"

ET ça fonctionne !!!! apparemment il faut utiliser des callback, je vais essayer de l'implanter sur mon code (le complet), mais je dois le modifier en appelant une fonction et non plus sur l'écoute de l'évènement (submit).

[Phpx1]

Bonjour,

Apparemment , je me suis emballé un peu trop vite ....ma dernière solution avec le (return false) ne fonctionne pas toujours (comportement bizarre).
En fait, ta solution logiquement aurait dû fonctionner , j'ai testé mais j'ai eu le même problème (comme je le mentionne + haut).

Est-ce en rapport avec le navigateur utilisé ? (j'utilise IE11 et Edge: même problèmes)
Sur quel navigateur l'a tu testé ?
Je ne sais plus quoi faire.... tout ceci pour afficher un simple message pendant X secondes (après validation) et recharger le même script....

[Toufik83]

Salut,

et avec ça ? :

Code :

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

1
2
3
4
5
6
7
8
9
10
 
setTimeout( function()
{
     var oMsg = document.getElementById("msgfoot");
     oMsg.style.visibility = "hidden";
     setTimeout( function()
     {
          window.location.replace("ajout1.html");
     }, 2000 ); 
}, 5000);

[Phpx1]

Bonjour,

Finalement, j'ai testé sur mon PC (config complète) en non plus sur ma tablette (version dégradée....) et Ca fonctionne bien !
Apparemment la version sur ma tablette n'avait pas le e.preventDefaut au début du J.S et donc malgré les 2 setTimeout ,( je ne voyais jamais l'affichage du msg ) car il rechargeait immédiatement la page.