Discussion :

[dust62]

Bonjour,

je souhaite réaliser une fonction (en javascript orienté objet) simple qui créée un élement en base de données (via AJAX) et qui récupère l'id créée par MySQL pour l'affecter à l'objet.
voici mon 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
 
 
function lobby(){
this.id='549';
 
this.create=function()
{
 $.ajax({
       url : 'requete_ajax.php',
       type : 'GET',
       data : { action: 'newLobby'} ,
       async:false,
       dataType :'text',
       success : this.setId
});
 
}
 
this.setId=function()
{
this.id=arguments[0];
console.log('setId: '+this.id);
}
 
}

la page requete_AJAX.php créé un nouvel enreg dans la base et retourne l'id créé par MySQL (que je récupère avec arguments[0])
Cette partie là fonctionne.


Quand j'utilise la fonction (ou plûtot l'objet) dans mon code javascript:

Code :

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

1
2
3
4
 
lobby=new lobby(); // creation de l'objet
lobby.create();  // creation du lobby en bdd et affectation de l'id
console.log('lobbyId: '+lobby.id);

Ce que m'affiche la console :
setId: 40 (l'id créé en base de données) => OK
lobbyId: 549 (l'id par défaut de l'objet lobby)

=> alors qu'entre temps la fonction setId aurait du affecter la valeur '40' à 'id' et non conserver la valeur par défaut '549'.


Je pense que la fonction console.log('lobbyId: '+lobby.id) est exécutée avant que l'AJAX n'est retourné le nouvel id et est lancé la fonction setId().
Je pensais qu'en mettant le paramètre async:false, le navigateur attendait la réponse ajax avant d'exécuter la suite du code js?

Quelle est mon erreur ? quelle serait la solution ?

Merci pour vos conseils.

[Bovino]

Ce n'est pas une question d'ordre d'appel des fonctions puisque comme tu le dis, une requête asynchrone attend d'avoir reçu la réponse avant de rendre la main (ce qui fait que ce mode est déconseillé du reste...).
Ton problème vient surtout de la valeur de this dans les différentes parties de ton code. Et malheureusement pour toi, dans la fonction AJAX, this n'est plus le même !

En JavaScript, this se réfère toujours à l'objet ayant appelé la méthode en cours, donc quand tu écris

Code :

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

$.ajax(...)

l'objet appelant la méthode ajax(), c'est $, pas l'instance de ton objet.
Une solution courante dans ce genre de cas est d'utiliser une variable intermédiaire pour garder une référence à l'instance en cours :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
this.create=function(){
  var that = this;
 $.ajax({
       url : 'requete_ajax.php',
       type : 'GET',
       data : { action: 'newLobby'} ,
       async:false,
       dataType :'text',
       success : that.setId
});
}

[dust62]

Merci!!
Problème résolu