Enchainer 2 actions ?

Version imprimable

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:

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>

Bonjour,

Citation:

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:

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:

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

Citation:

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

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

16/04/2020, 16h05
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 ?

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:

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:

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).

18/04/2020, 11h22
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....:roll:

Salut,

et avec ça ? :

Code:

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);

Bonjour,

pour éviter d'imbriquer les actions (et que ça devienne vite illisible), on peut simplement cumuler les délais :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 var theDelay = 0; theDelay += 5000; setTimeout( function() { // action 1 // ........ }, theDelay); theDelay += 2000; setTimeout( function() { // action 2 // ........ }, theDelay); ...

20/04/2020, 13h22
Phpx1

@Toufik83

Bonjour,

J'ai essayé mais j'ai tjrs le même résultat ;-((
D'ailleurs je n'ai pas bien compris la logique (surtout que les fonctions sont imbriquées).
Ce que je souhaiterais c'est d'abord afficher le msg et ensuite recharger le script (mais même en changeant la logique, même pb)
J ne sais pas si c'est lié au

Code:

<div id="msgfoot" >ENREG CREE </div>

mais je ne pense pas (ne vois pas d'erreur à ce niveau là)

que j'ai inséré juste après le </form> et avant le </body>
20/04/2020, 13h25
Phpx1

@jreaux62

Bonjour,

Effectivement, c'est ce que j'avais fait au départ enchainer les actions avec un timer pour chacune mais ça n'a pas fonctionné.
20/04/2020, 13h59
Invité
A mon avis, c'est surtout ta méthodologie qu'il faut revoir.

Effectuer l'ajout via Ajax, pour ensuite recharger toute la page n'a aucun sens !! *

Autant utiliser le fonctionnement "normal"/"classique" d'un formulaire : PRINCIPE de FORMULAIRE et TRAITEMENT sur la même page
- soumission "normale" du formulaire
- rechargement de la page avec traitement PHP + affichage
* Sinon, le rechargement via Ajax ne devrait concerner QUE "la partie formulaire" de la page.
20/04/2020, 15h03
Phpx1

Effectivement, c'est le principe que j'avais adopté au départ. (Saisie + trait dans la même page) mais je souhaitais afficher un message du genre "Enreg crée" (avec un echo) une fois le formulaire soumis et le trait en base effectué, malheureusement, je n'ai jamais eu en même temps l'affichage du msg et du formulaire car il me rechargeait la page (donc une page blanche) et m'affichait seulement le msg.
C'est pour cette raison que l'on m'a conseillé d'utiliser Ajax pour éviter de recharger la page.
21/04/2020, 13h56
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.