Discussion :

[nikko49]

Bonjour,

Après plusieurs recherches, je ne parviens pas à mettre à jour une variable globale javascript à la sortie de ma requête Ajax.
Voici l'explication de ce que je cherche à faire :

Sur un évènement (ici avant chaque upload d'un fichier), si c'est le premier fichier et qu'aucun album n'est choisi, je souhaite appeler la fonction "createAlbum()" qui va exécuter une requête Ajax pour créer l'album en BDD et me fournir l'ID de l'album crée dans la réponse AJAX

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
 
var _nSelectedAlbumID = -1;
 
jQuery('#toUpload').on('filepreupload', function(event, data, previewId, index) 
{
   	console.debug("filepreupload");
    	if (index == 0 && _nSelectedAlbumID == 0) 
    	{ 
    		createAlbum(_sSelectedAlbumName, _sSelectedAlbumDescription);
    	}
    	console.debug("AlbumID = " + _nSelectedAlbumID);
        data.form.append('nAlbumID', _nSelectedAlbumID);
});
 
function createAlbum(sAlbumName, sAlbumDescription)
{
	console.debug("create album start");
	jQuery.ajax(
        {
           type    : "POST",
           url     : "index.php",
           dataType: "json",
           async	: false,
           data    :
           {
              'view'      		: 'photos',
              'action'    		: 'createAlbum',
              'albumName' 	: sAlbumName,
              'albumDescription' 	: sAlbumDescription
           },
 
           success : function(response)
           {
        	if (response.success) { _nSelectedAlbumID = response.nAlbumID; console.debug("create album response : " + _nSelectedAlbumID); }
           }
       });
}

Dans le success, je récupère bien l'ID du nouvel album crée.
Par contre, quand je fais

Code :

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

console.debug("AlbumID = " + _nSelectedAlbumID);

après l'appel de la fonction createAlbum(), ma variable _nSelectedAlbumID est toujours à -1 ???

NB : En mettant la propriété "async : false" dans ma requête AJAX, l'ordre des appels est bien respecté.
En effet, avec mes "console.debug", j'obtiens bien :

filepreupload
create album start
create album response (avec l'ID du nouvel album)
AlbumID = (avec un ID à -1)

Je ne peux et je ne souhaite pas faire la suite de mes traitements dans le "success" de ma fonction createAlbum().

Quel est donc le moyen pour que je puisse :

1. appeler ma fonction createAlbum()
2. mettre à jour ma variable "_nSelectedAlbumID" dans le "success" de la fonction
3. ensuite utiliser cette variable "_nSelectedAlbumID" dans des traitements appelés après la fonction

Merci d'avance de vos réponses,

Nicolas

[nikko49]

Pour précision, si au lieu de faire appel à ma fonction createAlbum(), j'insère directement "mon code" dans l'évènement, la variable "_nSelectedAlbumID" est bien mis à jour !
En effet, ce code 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
20
21
22
23
24
25
26
27
28
29
30
31
32
33
 
jQuery('#toUpload').on('filepreupload', function(event, data, previewId, index) 
{
    	console.debug("filepreupload");
    	if (index == 0 && _nSelectedAlbumID == 0) 
    	{ 
    		console.debug("create album start");
    		jQuery.ajax(
    	       {
    	           type    : "POST",
    	           url     : "index.php",
    	           dataType: "json",
    	           async	: false,
    	           data    :
    	           {
    	               'view'      		: 'photos',
    	               'action'    		: 'createAlbum',
    	               'albumName' 		: _sSelectedAlbumName,
    	               'albumDescription' 	: _sSelectedAlbumDescription
    	           },
 
    	           success : function(response)
    	           {
    	        	   if (response.success) 
    	        	   { 
    	        	   	_nSelectedAlbumID = response.nAlbumID; 
    	        		console.debug("create album response : " + _nSelectedAlbumID);
	        	   }
    	           }
    	       });
    	   }
    	console.debug("AlbumID = " + _nSelectedAlbumID);
});

Pourquoi, en mettant ce "bloc" dans une fonction, la variable "_nSelectedAlbumID", n'est plus correcte ?

[danielhagnoul]

Vous avez manifestement compris que JS est asynchrone.

La fonction "createAlbum" est terminée avant que la transaction AJAX ne débute, donc votre variable est utilisée avant d'être mise à jour.

En général, la solution la plus évidente est de placer les codes dépendant dans la méthode "success".

Mais ici, c'est le code dépendant qui initie la transaction AJAX en appelant la méthode createAlbum !

On doit utiliser les promesses, il suffit de se rappeler que la transaction AJAX retourne un objet différé ("deferred" : http://api.jquery.com/category/deferred-object/).

Code javascript :

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
var _nSelectedAlbumID = -1;
 
function createAlbum(sAlbumName, sAlbumDescription)
{
    console.debug("create album start");
 
    return jQuery.ajax(
   {
    type    : "POST",
    url     : "index.php",
    dataType: "json",
    data    :
    {
       'view'      		: 'photos',
       'action'    		: 'createAlbum',
       'albumName' 	: sAlbumName,
       'albumDescription' 	: sAlbumDescription
    },
    success : function(response)
    {
      if (response.success) { _nSelectedAlbumID = response.nAlbumID; console.debug("create album response : " + _nSelectedAlbumID); }
    }
 });
}
 
jQuery('#toUpload').on('filepreupload', function(event, data, previewId, index) 
{
  console.debug("filepreupload");
 
  if (index == 0 && _nSelectedAlbumID == 0) 
  { 
    createAlbum(_sSelectedAlbumName, _sSelectedAlbumDescription).then(
      function( value ){
        console.log( "done", value );
        console.debug("AlbumID = " + _nSelectedAlbumID);
        data.form.append('nAlbumID', _nSelectedAlbumID);
      },
      function( value ){
        console.log( "fail", value );
      }
    );
  }
  else
  {
    console.debug("AlbumID = " + _nSelectedAlbumID);
    data.form.append('nAlbumID', _nSelectedAlbumID);
  }
});

[nikko49]

En effet, grâce aux promesses, tout fonctionne à merveille avec le code ci-dessus.
Dans ce cas, l'objet entier étant renvoyé dans la promesse, il n'y a plus besoin de la méthode "success". Tout se récupère dans la promesse directement.

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
 
function createAlbum(sAlbumName, sAlbumDescription)
{
	return jQuery.ajax(
    {
        type    : "POST",
        url     : "index.php",
        dataType: "json",
        async	: false,
        data    :
        {
            'view'      		: 'photos',
            'action'    		: 'createAlbum',
            'albumName' 		: sAlbumName,
            'albumDescription' 	: sAlbumDescription
        }
    });
}

Code :

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

1
2
3
4
5
6
7
 
if (index == 0 && _nSelectedAlbumID == 0) 
{ 
    	createAlbum(_sSelectedAlbumName, _sSelectedAlbumDescription).then(
         function( obj ) { _nSelectedAlbumID = obj.nAlbumID; });
}
console.debug("AlbumID = " + _nSelectedAlbumID);

Merci pour tout