Aller au contenu
Modifié par Julien EYMERY le 2015/07/15 14:46
Afficher les derniers auteurs
1 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 :
2 (((
3 == Solution 1 ==
4 )))
5
6 a) Dans la page, ajouter une balise Adélia Condition qui contient un tag SCRIPT. Dans ce tag, faire l'appel au callback
7
8
9 {{code language="xml" language="xml"}}
10 <adelia:b_cond name="CND_1" />
11 <script>
12 myCallback();
13 </script>
14 <adelia:e_cond />
15 {{/code}}
16
17
18 b) Dans le bloc L4G de l'événement Ajax, fixer la condition à *VRAI.
19
20 {{hardis-info type="warning" icon="true"}}
21 ATTENTION : l'instruction CND_1 ~= *VRAI doit être la dernière instruction exécutée.
22 {{/hardis-info}}
23
24 (((
25 ==
26 Solution 2 ==
27 )))
28
29 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
30
31 Cette fonction prend un seul paramètre en entrée : un objet Javascript dont les attributs sont les suivants :
32
33 - form (type alpha) : nom du formulaire qui contient l'objet Adélia qui est à l'origine de l'événement Ajax,
34 - obj (type alpha) : nom de l'objet Adélia qui est à l'origine de l'événement Ajax,
35 - evt (type alpha) : nom de l'événement Javascript pour lequel on a associé un événement Adélia Ajax,
36 - fct (type fonction) : fonction de callback appelée en cas de succès du traitement de l'événement Adélia Ajax,
37 - 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.
38
39
40 Exemple 1 : Appel d'un callback lors du clic sur un bouton BTN_1.
41
42
43 {{code language="xml" language="xml"}}
44 <form name="MY_FORM" id="MY_FORM" method="post">
45 <adelia:button><input type="button" name="BTN_1" id="BTN_1" value="click on it" onclick="::ADELIA_EVT(:AJAX,:ASYNC,:COMP=1)"/></adelia:button>
46 </form>
47 {{/code}}
48
49
50 Dans la balise HEAD (ou dans un fichier Javascript externe), rajouter :
51
52
53
54 {{code language="js" language="js"}}
55 <script>
56 function myCallback()
57 {
58 alert('Adelia Ajax event succeded');
59 }
60 AWS.AWSAJAX.AjaxRequestManager.setAWSAjaxRequestOnSuccess ({form:'MY_FORM', obj:'BTN_1', evt:'onclick', fct:myCallback});
61 </script>
62 {{/code}}
63
64
65
66
67 Exemple 2 : Identique à l'exemple 1 mais en passant des paramètres à la fonction de callback.
68
69 {{hardis-info type="warning" icon="true"}}
70 Attention : La gestion des paramètres n'est supportée qu'à partir de la V12 d'Adélia Web Studio.
71 {{/hardis-info}}
72
73
74
75 {{code language="none"}}
76 <form name="MY_FORM" id="MY_FORM" method="post">
77 <adelia:button><input type="button" name="BTN_1" id="BTN_1" value="click on it" onclick="::ADELIA_EVT(:AJAX,:ASYNC,:COMP=1)"/></adelia:button>
78 </form>
79 {{/code}}
80
81
82 Le code Javascript :
83
84
85
86 {{code language="js" language="js"}}
87 <script>
88 // Note importante : Le premier paramètre de la fonction de callback est toujours l'objet Javascript XMLHttpRequest
89 function myCallback(xhrObj, myParams)
90 {
91 alert('Adelia Ajax event succeded. First parameter is ' + myParams.param1 + ' and second parameter is ' + myParams.param2);
92 }
93 // Note importante : Si vous devez passer plus d'un paramètre à la fonction de callback alors fctParam doit être un objet Javascript
94 AWS.AWSAJAX.AjaxRequestManager.setAWSAjaxRequestOnSuccess ({form:'MY_FORM', obj:'BTN_1', evt:'onclick', fct:myCallback, fctParam:{param1:'first parameter', param2:'second parameter'}});
95 </script>
96 {{/code}}
97
98
99
100 Pour supprimer l'appel à un callback, passer la valeur null à l'attribut 'fct'.
101
102 Exemple : Supprimer le callback précédemment défini.
103
104
105 {{code language="js" language="js"}}
106 AWS.AWSAJAX.AjaxRequestManager.setAWSAjaxRequestOnSuccess ({form:'MY_FORM', obj:'BTN_1', evt:'onclick', fct:null});
107 {{/code}}
108
109
110
111 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.
112
113 Exemple 3 : Identique à l'exemple 1 mais BTN_1 fait partie d'un objet Table liste TBL_1.
114
115
116 {{code language="xml" language="xml"}}
117 <form name="MY_FORM" id="MY_FORM" method="post">
118 <table cols="1" id="TBL_1" width="75%" border="1" cellpadding="1" cellspacing="1">
119 <tbody><adelia:tablelist name="TBL_1">
120 <tr>
121 <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>
122 </tr>
123 </adelia:tablelist></tbody>
124 </table>
125 </form>
126 {{/code}}
127
128
129 Le code Javascript :
130
131
132
133 {{code language="js" language="js"}}
134 <script>
135 function myCallback()
136 {
137 alert('Adelia Ajax event succeded');
138 }
139 // L'attribut 'lst' doit avoir comme valeur le nom Adélia de l'objet Table liste (type alpha)
140 // L'attribut 'row' indique sur quels objets bouton on veut déclencher le callback.
141 // La valeur -1 indique pour toutes les lignes de la Table liste (c'est à dire tous les boutons),
142 // Une valeur supérieure ou égale à 0 indique un numéro de ligne (0 identifie le bouton de la première ligne)
143 AWS.AWSAJAX.AjaxRequestManager.setAWSAjaxRequestOnSuccess ({form:'MY_FORM', obj:'BTN_1', evt:'onclick', lst:'TBL_1', row:-1, fct:myCallback});
144 </script>
145 {{/code}}
146
147
148
149 Dans cet exemple, le callback est exécuté après le traitement du clic sur TOUS les boutons de la Table liste.
150
151 (((
152 == (% style="line-height: 1.5;" %)Articles connexes(%%) ==
153 )))
154
155 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.
156
157 {{liveData sort="doc.date:desc" source="liveTable" properties="doc.title,doc.date,doc.author" description="Recently updated" limit="5" filters="tag=web ajax événement" sourceParameters="translationPrefix=platform.index."}}{{/liveData}}
158