Discussion :

[ClayStone]

Bonjour à tous,
J'ai un formulaire HTML que je traite avec un script js contenant (entre autre) un appel ajax vers un fichier php qui alimente une base de donnée SQL
Je js et l'ajax sont encore un peu mystérieux pour moi. J'avais truffé le js de boites alert pour debugger le script. Maintenant que tout fonctionne je supprime ces alert devenues inutiles.
Mais la suppression de l'une de ces boites semble empêcher un bout de code de fonctionner : le php appelé par ajax ne s’exécute pas, l'alert de ajax ne s'affiche pas, je n'ai pas de message d'erreur dans la console.
Le script suivant fonctionne correctement,

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
if (confirm(messageConfirm) )   
            {
            $.ajax(
                {
                type:'POST',
                url:'ajout-article.php',
                data: parametres,
                datatype: 'text',
                cache: false,
                success: function(retourSql) {
                    alert (retourSql);
                    }
                });
            alert ('Fin du If de confirmation') // la ligne à supprimer
            }
        else
            {
            alert (messageAnnul)    
            }

Ce code (suppression de la ligne 14) ne fonctionne pas

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
if (confirm(messageConfirm) )   
            {
            $.ajax(
                {
                type:'POST',
                url:'ajout-article.php',
                data: parametres,
                datatype: 'text',
                cache: false,
                success: function(retourSql) {
                    alert (retourSql);
                    }
                });
            }
        else
            {
            alert (messageAnnul)    
            }

J'ai pensé à une '{' ou ';' mal placées, ou à un comportement de l'ajax mal compris, mais je n'ai pas trouvé comment faire fonctionner ce tout petit bout de script.
Mon erreur doit piquer les yeux, mais où est-elle? Comment la corriger?
Merci de votre aide!

[Invité]

Bonjour,

1- Au lieu d'utiliser des alert() pour déboguer, mets des console.log(...), et regarde dans la console du navigateur (touche "F12" du clavier, puis onglet "Console")

2- C'est un problème de compréhension du comportement d'ajax.

Ajax est asynchrone (par défaut).

• on fait appel à un fichier externe, qui traite les données reçues
• le résultat met "un certain temps" à revenir au script JS

• Avec un alert(...),... le temps de LIRE cet alert, le résultat est arrivé.
• SANS, le résultat n'a pas eu le temps d'arriver... avant la suite du script.

La solution la plus simple :

• TOUTE la suite du script doit être écrite/exécutée DANS le success: de la fonction Ajax, pour pouvoir "prendre en compte" le résultat.

Il existe d'autres moyens (mais sans trop connaitre la suite de ton code, difficile de te conseiller...) :

• Ajax synchrone (à éviter),
• ou "promesses" (Utiliser les promesses)

[ClayStone]

Merci,
J'avais bien vu passer ceci et ça pendant mes recherches...
Je jette un coup d'oeil à ce que tu me proposes et je reviens.

[ClayStone]

Merci pour tes explications limpides. Problème à moitié résolu... ça marche, mais je ne comprend pas pourquoi...
J'ai opté pour les promesses.
J'ai commis ceci :
1-

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
var ajaxCall = $.ajax(
                {
                type:'POST',
                url:'ajout-article.php',
                data: parametres,
                datatype: 'text',
                cache: false
                });
 
if (confirm(messageConfirm) )   
            {
            ajaxCall.promise()
                .done(function (retourSql) {alert (retourSql); } )
                .fail(function () { console.log ("l'appel ajax a échoué"); });
            }
else
            {
            alert (messageAnnul)    
            }

L'appel ajax donnait le résultat attendu mais la console m'indiquait que retourSql était undefined (alors que alert (retourSql) m'affichait bien le retour du php attendu. )

Je suis finalement arrivé à ceci :
2-

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
var ajaxCall = $.ajax(
                {
                type:'POST',
                url:'ajout-article.php',
                data: parametres,
                datatype: 'text',
                cache: false,
                success: function (retourSql) {
                    alert (retourSql);
                    }
                });
 
if (confirm(messageConfirm) )   
            {
            ajaxCall.promise()
                .done( )
                .fail(function () { console.log ("l'appel ajax a échoué"); });
            }
else
            {
            alert (messageAnnul)    
            }

Tout baigne... donc résolu. Mais j'accepterai toute explication sur l'erreur dans 1-

[ClayStone]

Bon, en fait, ce dernier code ne donnait pas le résultat attendu : que le confim soit TRUE ou FALSE, l'appel ajax se lançait.
Et en plus, j'ai pas vraiment compris comment utiliser les promesses

Finalement je me suis inspiré de :

La solution la plus simple :
TOUTE la suite du script doit être écrite/exécutée DANS le success: de la fonction Ajax, pour pouvoir "prendre en compte" le résultat.

En reprenant la suggestion à l'envers, j'ai contourné le problème en remaniant la fonction js : en plaçant l'appel ajax en fin de script, une fois toutes les conditions testées. (du coup, plus de suite de script à ajouter dans le succès)

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
....
   if (!confirm(messageConfirm) )   
        {
        alert (messageAnnul);    
        return;
        }
    else
        {
        $.ajax(
            {
            type:'POST',
            url:'http://localhost/saisie-article/ajout-article.php',
            data: parametres,
            datatype: 'text',
            cache: false,
            success: function (retourSql) {
                if (retourSql) {alert(retourSql)}
                initPage();
                }
        })

Désolé pour le double post, pas trouvé le bouton "modifier"