Appeler une fonction Javascript de rappel (callback) après le traitement d'un événement Ajax
Pour exécuter une fonction Javascript après le traitement d'un événement Adélia Ajax c'est-à-dire après la mise à jour des objets graphiques dans la page (résultat de l'exécution du code L4G associé), deux solutions sont possibles :
Solution 1
a) Dans la page, ajouter une balise Adélia Condition qui contient un tag SCRIPT. Dans ce tag, faire l'appel au callback
<script>
myCallback();
</script>
<adelia:e_cond />
b) Dans le bloc L4G de l'événement Ajax, fixer la condition à *VRAI.
ATTENTION : l'instruction CND_1 = *VRAI doit être la dernière instruction exécutée.
Solution 2
Il est possible d'enregistrer un callback pour un événement Adélia Ajax donné. Pour cela, il faut utiliser une fonction Javascript non documentée du gestionnaire de requête Ajax : AWS.AWSAJAX.AjaxRequestManager.setAWSAjaxRequestOnSuccess
Cette fonction prend un seul paramètre en entrée : un objet Javascript dont les attributs sont les suivants :
- form (type alpha) : nom du formulaire qui contient l'objet Adélia qui est à l'origine de l'événement Ajax,
- obj (type alpha) : nom de l'objet Adélia qui est à l'origine de l'événement Ajax,
- evt (type alpha) : nom de l'événement Javascript pour lequel on a associé un événement Adélia Ajax,
- fct (type fonction) : fonction de callback appelée en cas de succès du traitement de l'événement Adélia Ajax,
- fctParam (type simple ou objet - optionnel) : Paramètres à passer à la fonction de callback. Attention : ce paramètre n'est supporté qu'à partir de la V12 d'Adélia Web Studio.
Exemple 1 : Appel d'un callback lors du clic sur un bouton BTN_1.
<adelia:button><input type="button" name="BTN_1" id="BTN_1" value="click on it" onclick="::ADELIA_EVT(:AJAX,:ASYNC,:COMP=1)"/></adelia:button>
</form>
Dans la balise HEAD (ou dans un fichier Javascript externe), rajouter :
function myCallback()
{
alert('Adelia Ajax event succeded');
}
AWS.AWSAJAX.AjaxRequestManager.setAWSAjaxRequestOnSuccess ({form:'MY_FORM', obj:'BTN_1', evt:'onclick', fct:myCallback});
</script>
Exemple 2 : Identique à l'exemple 1 mais en passant des paramètres à la fonction de callback.
Attention : La gestion des paramètres n'est supportée qu'à partir de la V12 d'Adélia Web Studio.
<adelia:button><input type="button" name="BTN_1" id="BTN_1" value="click on it" onclick="::ADELIA_EVT(:AJAX,:ASYNC,:COMP=1)"/></adelia:button>
</form>
Le code Javascript :
// Note importante : Le premier paramètre de la fonction de callback est toujours l'objet Javascript XMLHttpRequest
function myCallback(xhrObj, myParams)
{
alert('Adelia Ajax event succeded. First parameter is ' + myParams.param1 + ' and second parameter is ' + myParams.param2);
}
// Note importante : Si vous devez passer plus d'un paramètre à la fonction de callback alors fctParam doit être un objet Javascript
AWS.AWSAJAX.AjaxRequestManager.setAWSAjaxRequestOnSuccess ({form:'MY_FORM', obj:'BTN_1', evt:'onclick', fct:myCallback, fctParam:{param1:'first parameter', param2:'second parameter'}});
</script>
Pour supprimer l'appel à un callback, passer la valeur null à l'attribut 'fct'.
Exemple : Supprimer le callback précédemment défini.
Pour ajouter un callback à un événement Adélia Ajax défini sur un objet Adélia qui fait partie d'un objet liste (Table liste ou Liste), il faut utiliser en plus d'autres attributs à l'objet Javascript passé à la fonction setAWSAjaxRequestOnSuccess.
Exemple 3 : Identique à l'exemple 1 mais BTN_1 fait partie d'un objet Table liste TBL_1.
<table cols="1" id="TBL_1" width="75%" border="1" cellpadding="1" cellspacing="1">
<tbody><adelia:tablelist name="TBL_1">
<tr>
<td><adelia:button><input type="button" name="BTN_1" id="BTN_1" value="clic on it" onclick="::ADELIA_EVT(:AJAX,:ASYNC,:COMP=1)"/></adelia:button></td>
</tr>
</adelia:tablelist></tbody>
</table>
</form>
Le code Javascript :
function myCallback()
{
alert('Adelia Ajax event succeded');
}
// L'attribut 'lst' doit avoir comme valeur le nom Adélia de l'objet Table liste (type alpha)
// L'attribut 'row' indique sur quels objets bouton on veut déclencher le callback.
// La valeur -1 indique pour toutes les lignes de la Table liste (c'est à dire tous les boutons),
// Une valeur supérieure ou égale à 0 indique un numéro de ligne (0 identifie le bouton de la première ligne)
AWS.AWSAJAX.AjaxRequestManager.setAWSAjaxRequestOnSuccess ({form:'MY_FORM', obj:'BTN_1', evt:'onclick', lst:'TBL_1', row:-1, fct:myCallback});
</script>
Dans cet exemple, le callback est exécuté après le traitement du clic sur TOUS les boutons de la Table liste.
Articles connexes
Les articles connexes apparaissent ici en fonction des étiquettes que vous avez sélectionnées. Cliquez pour modifier la macro et ajouter ou modifier des étiquettes.