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
<adelia:b_cond name="CND_1" /> <script> myCallback(); </script> <adelia:e_cond />
b) Dans le bloc L4G de l'événement Ajax, fixer la condition à *VRAI.
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.
<form name="MY_FORM" id="MY_FORM" method="post"> <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 :
<script>
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.
<form name="MY_FORM" id="MY_FORM" method="post"> <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 :
<script>
// 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.
AWS.AWSAJAX.AjaxRequestManager.setAWSAjaxRequestOnSuccess ({form:'MY_FORM', obj:'BTN_1', evt:'onclick', fct:null});
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.
<form name="MY_FORM" id="MY_FORM" method="post"> <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 :
<script>
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