ordre d'execution javascript

Version imprimable

Bonjour,

j'ai écrit un fonction en JS pour faire un insert en base puis rediriger l'internaute vers une autre fenetre. pour ça j'utilise un XMLHTTPRequest qui fonctionne très bien sans la redirection. en effet quand je mets en place les condition de redirection il fait la redirection avant de faire la requete.

voici le code:

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
52
53
54
function insert(){
  var carte=getRadioVal('carte');
  var nom = document.getElementById('champsnom');
  var nom_value = nom.value;
  var prenom = document.getElementById('champsprenom');
  var prenom_value = prenom.value;
  var mail = document.getElementById('champsmail');
  var mail_value = mail.value;
  var type=getRadioVal('typo');
  if (type=='typpf'){
    var nommag=document.getElementById('searchp');    
  }
  if (type=='typst'){
    var nommag=document.getElementById('searchs');    
  }
  if (type=='typmg'){
    var nommag=document.getElementById('searchm');    
  }
  var mag_value=nommag.value; 
  db.transaction(
    function(t){
      t.executeSql("INSERT INTO gvappprod VALUES (?,?,?,?,?)", [nom_value,prenom_value,mail_value,mag_value,carte]);
          }
  );
  if (window.navigator.onLine){
  db.transaction(
    function(t){
      t.executeSql("SELECT nom AS nom, prenom AS prenom, mail AS mail, enseigne AS enseigne, choix AS choix FROM gvappprod",[],function(t,r){
        for (var i=0;i<r.rows.length;i++){
          nomloc=r.rows.item(i).nom;
          prenomloc=r.rows.item(i).prenom;
          mailloc=r.rows.item(i).mail;
          magloc=r.rows.item(i).enseigne;
          choixloc=r.rows.item(i).choix;
          //alert(mailloc);
          xhr = new XMLHttpRequest();
          xhr.open("GET", "insert.php?nom=" + nomloc + "&prenom=" + prenomloc + "&mail=" + mailloc + "&mag=" + magloc + "&choix=" + choixloc, true);
          alert ('on fait le send');
          xhr.send(null);
          }
        });
      }
  );
  vidange();
  }
  resetform();
  if (sessionStorage.getItem("page")=="1") {
    alert("onpart sur fin");
    //window.location.href='fin.html';
  } else {
    alert("onpart sur mobile");
    //window.location.href='trans.html';
  }
};

il fait "alert("onpart sur fin");" avant de faire "alert ('on fait le send');" du coup j'ai rien en base.

je ne vois pas d'erreur pourtant. je pensait que JS s'exécutait de haut en bas. si c'est une erreur d'accolade ou de point virgule, je ne vois pas ou elle est.

d'avance merci pour votre aide.

26/09/2013, 10h01
Bovino

Citation:

je pensait que JS s'exécutait de haut en bas

Sauf dans le cas de code asynchrone comme le sont souvent les requêtes AJAX.
Voir : Un classique AJAX : utiliser les données au bon moment !
26/09/2013, 10h58
CaraLePoke

ok, je comprend bien la nuance maintenant. c'est normal. :)
c'est rassurant finalement.
est ce que tu aurait le même exemple que pour ton post explicatif mais avec le callback qui fonctionne? je l'adapterai à ma sauce ensuite.
Merci pour ton aide.
26/09/2013, 11h39
Kaamo
Le callback qui fonctionne ? :koi:
Dans l'exemple de Bovino, ceci :
Code:

1 2 3 4 5 6 xhr.onreadystatechange = function(){ if(xhr.readyState == 4 && xhr.status == 200){ monResultat = xhr.responseText; alert(monResultat); } };
... le "callback" est en rouge. Quand la requête côté serveur est terminée/les données reçues (xhr.readyState === 4) et la page dans un bon état (xhr.status === 200), tu peux faire ton traitement.
soit tu mets le code "en vrac" comme ci-dessus. C'est alors plutôt un code de callback :) Soit tu définis une fonction et tu l'appelles à la place de ce code:
Code:

1 2 3 4 5 6 7 8 // Fonction callback function callback(monResultat) { // faire ce que tu veux avec monResultat } if(xhr.readyState == 4 && xhr.status == 200){ callback(xhr.responseText); }
27/09/2013, 09h52
CaraLePoke

Je vois, mais mon problème ici n'est pas d'utiliser ce qui sort de mon xhr mais seulement de savoir quand il a fini... pour faire une redirection.

Comment fait-on pour qu'AJAX finisse son boulot (quel feignasse!), soit synchrone et pas casse- couille? :)

Le code que tu souhaites exécuter après que le xhr a fini son boulot doit être dans une fonction de callback, tu n'as pas le choix !

Si j'ai bien compris, c'est ce code que tu souhaites faire à la fin de l'appel AJAX ?
Code:

1 2 3 4 5 6 7 8 resetform(); if (sessionStorage.getItem("page")=="1") { alert("onpart sur fin"); //window.location.href='fin.html'; } else { alert("onpart sur mobile"); //window.location.href='trans.html'; }
Et bien il faut le mettre dans le callback, c'est tout :)

Pour reprendre l'analogie de Bovino, il faut attendre que ton pote revienne du poulailler pour faire l'omelette ! Sinon, sans les oeufs, comment veux-tu la faire ? On fait pas d'omelette sans casser les coui***, euh, les oeufs pardi ;)

10/10/2013, 11h52
CaraLePoke

Avec toute ces infos, je m'en suis finalement sorti. J'ai fait ma requête dans la page de résultat, après la redirection.
MErci pour votre aide!