Retourner le résultat AJAX avec CALLBACK

Version imprimable

Bonjour à tous,

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

Ma fonction appelante

Code:

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 :mur: car ne renvoie pas l'objet JSON attendu. Il est VIDE :furieux:

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

Citation:

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 :bravo:

06/06/2014, 19h14
Bovino

Code:

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

Code:

function getInfoFormulaire(pIdUser,callback)

:roll:

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 ! :aie:

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

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 :boulet: 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:

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

06/06/2014, 19h42
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:

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:

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.

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:

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 :lol:

JQuery = asynchrone => architecture un peu différente

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:

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

Pour

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

07/06/2014, 09h21
Bovino

Citation:

Envoyé par Bovino

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

Je te l'avais déjà indiqué... :roll:
08/06/2014, 17h32
informer

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