Discussion :

[informer]

Bonjour à tous,

Merci à tous ceux qui pourront me dire pourquoi le traitement avec le CALLBACK ne fonctionne pas avec AJAX !!!

Ma fonction appelante

Code :

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

1
2
3
4
5
6
function initFormulaire()
{  var urlParam =  extractUrlParams(); // Extrait les données passées dans l'URL => Ok
    var jsonData = {};
    jsonData = getInfoFormulaire (urlParam["id"]);// Retourne des données d'une base de données au format JSON => Erreur 
    addListBox(jsonData);
}

La fonction qui pose problème est getInfoFormulaire car ne renvoie pas l'objet JSON attendu. Il est VIDE

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
function getInfoFormulaire(pIdUser,callback)
{   try
    {   var serialData ={};//déclaration d'un objet
        serialData.id= pIdUser;
        var jsonDataReturn = {};
        $.ajax
        (   {   type: "POST",
                url: "formulaireDB.php",
                data: serialData ,
                dataType: "json",
                success: function(dataSQL, statut)
                { jsonDataReturn = callback(dataSQL);//========>VOIR CI DESSOUS LA DESCRIPTION DE L'ERREUR
                },
                error: function(dataSQL, statut)
                {   alert ("error sqlConnect.js : " + dataSQL.erreur);
                }
            }
        );
    }
    catch (e)
    {   alert ('An error has occurred: '+ e.message);
    } 
    return jsonDataReturn;
}
}

Voici la description de l'erreur

Uncaught TypeError: undefined is not a function formulaire.js:
39$.ajax.success formulaire.js:
39b.Callbacks.c jquery-1.9.1.min.js:
3b.Callbacks.p.fireWith jquery-1.9.1.min.js:
3k jquery-1.9.1.min.js:
5b.ajaxTransport.send.r

Encore une fois merci pour votre aide

[Bovino]

Code :

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

jsonData = getInfoFormulaire (urlParam["id"]);

Code :

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

function getInfoFormulaire(pIdUser,callback)

Tu appelles une fonction qui attend deux paramètres avec un seul paramètre, alors c'est sûr qu'au moment où te utilises le second, ça coince !

D'autre part : Un classique AJAX : utiliser les données au bon moment !

[informer]

Bonjour Bovino,

Merci pour ta réponse qui suscite hélas une autre question. Outre le fait que je ne comprenne pas le principe du callback envoyé en paramètre mais ça s'applique à tellement d'autres choses que je ne me formalise plus...., suffit-il de déclarer une variable callback puis de la passer en paramètre genre:

Code :

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

1
2
3
4
5
6
7
8
9
function initFormulaire()
{  var urlParam =  extractUrlParams(); // Extrait les données passées dans l'URL => Ok
    var jsonData = {};
 
    var  callback;
    jsonData = getInfoFormulaire (urlParam["id"], callback);// Retourne des données d'une base de données au format JSON => Erreur 
 
addListBox(jsonData);
}

Et hop la vie est belle....

[Bovino]

Euh... tu ne sembles déjà pas avoir bien saisi la différence entre les paramètres que tu envoies à la fonction lors de son appel et ceux que la fonction elle-même attend.
En gros, quand tu écris

Code :

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

1
2
3
4
function alerte(param){
    console.log(param)
};
alerte('foo');

La fonction elle-même attend un paramètre. Dans le corps de la fonction, ce paramètre sera référencé sous le nom param. Mais quand tu appelles la fonction, il faut donner une valeur connue à ce paramètre (la chaine 'foo' dans l'exemple).
De la même manière, lorsque tu as défini une fonction, tu peux soit l'appeler (alerte('foo')), soit y faire référence (alerte).

Dans ton écriture,

Code :

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

function getInfoFormulaire(pIdUser,callback)

callback représente une référence à une fonction qui sera appelée dans le code de la fonction. Il faut donc que quand tu appelles cette fonction, ce paramètre soit connu et corresponde à une autre fonction.

[informer]

J'essaye de comprendre mais sur les autres forums, cette solution est toujours évoquée mais callback n'est pas vraiment expliqué.

Ca a rapport avec le statut et le readytostate comme ci-dessous:

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
f (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();

Sinon aurais-tu un voire plusieurs liens de posts qui donnent une solution à ce problème STP

[informer]

Après une intense réflexion sur la problématique inhérente à l'asynchronisme AJAX, il faut effectivement penser l'architecture un peu différemment.

Il ne faut pas faire un appel à $.ajax avec return mais faire appel aux fonctions dans la boucle de traitement $.ajax (error, success, complete).

Donc exit

Code :

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

1
2
jsonData = getInfoFormulaire (urlParam["id"]);
addListBox(jsonData);

Pour

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
function initFormulaire()
{  var urlParam =  extractUrlParams(); // Extrait les données passées dans l'URL => Ok
    getInfoFormulaire (urlParam["id"]);// Retourne des données d'une base de données au format JSON => Erreur 
    addListBox(jsonData);
}
 
function getInfoFormulaire(pIdUser)
{   try
    {   var serialData ={};//déclaration d'un objet
        serialData.id= pIdUser;
        var jsonDataReturn = {};
        $.ajax
        (   {   type: "POST",
                url: "formulaireDB.php",
                data: serialData ,
                dataType: "json",
                success: function(dataSQL, statut)
                { addListBox(dataSQL);//========>Appeler quand traitement asynchrone fini
                },
                error: function(dataSQL, statut)
                {   alert ("error sqlConnect.js : " + dataSQL.erreur);
                }
            }
        );
    } // ....
}

Bon par contre dois tester si peux appeler addListBox directement ou dois l'envoyer dans la fonction getInfoFormulaire en paramètre comme ça getInfoFormulaire(param, addListBox)Je teste et espère que c'est bien la solution.

To be continued...

[Bovino]

D'autre part : Un classique AJAX : utiliser les données au bon moment !

Je te l'avais déjà indiqué...

[informer]

Merci encore pour ton aide qui m'a permis d'avoir les idées d'équerre !