Execute JavaScript before and after the f:ajax listener is invoked
It there an easy way to invoke a JavaScript action before and after the invocation of an <f:ajax listener>, e.g. I'd like to invoke window.alert("pre") before and window.alert("post") after onChange is invoked in the backing 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 multiple f:ajax elements doesn't seem to work (maybe it should?!), e.g. 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 invoked.
Answer
Use onevent attribute. It must point to a callback function reference (so don't include parentheses!):
<f:ajax ... onevent="functionName" />
Whereby the actual callback function look like this (JSF will provide the argument all by itself):
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;
}
}