Discussion :

[CaraLePoke]

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 :

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

[Bovino]

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 !

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

[Kaamo]

Le callback qui fonctionne ?
Dans l'exemple de Bovino, ceci :

Code :

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

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 :

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

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

[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?

[Kaamo]

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 :

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

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

[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!