requête Ajax et mise à jour de rappel sont déclenchaient en même temps

Question

J'ai quelques boutons de soumission qui sont définis de la manière suivante:

<input id="add_200,231" type="submit" onclick="updatePage(401,27371,200,231)" value="Add"/> 

La fonction javascript correspondant référencé dans « onclick » ressemble à ceci:

function updatePage(slac,sci,tlac,tci) { 
    var url = '/neighbouring?.state=add_cell&source=' + slac + ',' + sci +'&target='+ tlac + ',' + tci + '&dummy='+(new Date()).getTime(); 

    new Ajax.Request(url,{ 
     onComplete: triggerContentUpdate(slac,sci)  
    }); 
} 

function triggerContentUpdate(slac,sci) { 
    var updates = document.getElementsByClassName('update_on_add'); 
    for (var i = 0; i < updates.length; i++) { 
     var uid = updates[i].id; 
     var url = '/neighbouring?.state=update_template&divid=' + uid + '&source='+slac + ',' +sci + '&dummy='+(new Date()).getTime(); 
     var uAjax = new Ajax.Updater(uid,url,{ method: 'get'}); 

    } 
} 

Les éléments qui doivent être mis à jour sont étiquetés avec des balises de classe "update_on_add". Lorsque j'utilise Firebug, je peux voir que la fonction Ajax.Request dans updatePage() ainsi que Ajax.Update dans les fonctions triggerContentUpdate() sont appelées en même temps. Je m'attendais à ce que triggerContentUpdate() ne soit appelé qu'après que Ajax.Request soit terminé.

Ai-je raté quelque chose ici?

Answer 1

Votre ligne

onComplete: triggerContentUpdate(slac,sci) 

devrait être

onComplete: function() { triggerContentUpdate(slac,sci); } 

Vous appelez immédiatement la fonction et attribuer sa valeur de retour à l'élément onComplete.

Answer 2

Le problème avec votre configuration est le rappel que vous enregistrez n'est pas une référence de fonction c'est un appel de fonction.

onComplete: triggerContentUpdate(slac,sci) 

Lorsque javascript trouve la ligne au-dessus appellera la fonction triggerContentUpdate avec les paramètres donnés et attribuer la valeur de retour de la fonction à la propriété onComplete.

Greg a déjà résolu une manière de gérer cela, nous lui assignons une référence de fonction anonyme à la propriété onComplete.

Une autre façon de gérer ce faire la fonction triggerContentUpdate pour retourner une fonction donnée ci-dessous

function triggerContentUpdate(slac,sci){ 
    return function(){ 
     //Your logic goes here. Both your variables slac and sci are available inside the returned function. 
     //This uses the concept of javascript clousure 
    } 
}