All geek questions in one place

Run javascript before and after running f: ajax listener

There is an easy way to trigger a JavaScript action before and after calling <f:ajax listener> , for example. I would like to call window.alert("pre") before and window.alert("post") after onChange is called in the backup bean ACtrl :

 <h:form> <h:inputText id="anId" value="#{cityCtrl.dbHost}"> <f:ajax event="change" listener="#{aCtrl.onChange}" execute="@all"/> </h:inputText> </h:form> 
 @ManagedBean public class ACtrlimplements Serializable { public void onChange(AjaxBehaviorEvent event) { System.out.println("something changed"); } }

Adding a few f:ajax elements doesn't seem to work (maybe it should be!), For example. in

 <h:form> <h:inputText id="anId" value="#{cityCtrl.dbHost}"> <f:ajax event="change" listener="#{aCtrl.toggle}" execute="@all"/> <f:ajax event="change" listener="#{aCtrl.onChange}" execute="@all"/> <f:ajax event="change" listener="#{aCtrl.toggle}" execute="@all"/> </h:inputText> </h:form> 
 @ManagedBean public class ACtrlimplements Serializable { public void onChange(AjaxBehaviorEvent event) { System.out.println("something changed"); } public void toggle(AjaxBehaviorEvent event) { System.out.println("blah"); } }

only ACtrl.onChange is called.

+6
source share
1 answer

Use onevent . It should point to a callback function link (so don't include parentheses!):

 <f:ajax ... onevent="functionName" />

So the actual callback function looks like this (JSF will provide an argument on its own):

 function functionName(data) { var status = data.status; // Can be "begin", "complete" or "success". var source = data.source; // The parent HTML DOM element. switch (status) { case "begin": // Before the ajax request is sent. // ... break; case "complete": // After the ajax response is arrived. // ... break; case "success": // After update of HTML DOM based on ajax response. // ... break; } }

See also:

+7
source

Source: https://habr.com/ru/post/972707/

More articles:


All Articles