title: Execute JavaScript before and after the f:ajax listener is invoked
body: <p>It there an easy way to invoke a JavaScript action before and after the invocation of an <code>&lt;f:ajax listener&gt;</code>, e.g. I'd like to invoke <code>window.alert("pre")</code> <strong>before</strong> and <code>window.alert("post")</code> <strong>after</strong> <code>onChange</code> is invoked in the backing bean <code>ACtrl</code>:</p>
  
  <pre><code>&lt;h:form&gt;
      &lt;h:inputText id="anId" value="#{cityCtrl.dbHost}"&gt;
          &lt;f:ajax event="change" listener="#{aCtrl.onChange}" execute="@all"/&gt;
      &lt;/h:inputText&gt;
  &lt;/h:form&gt;
  </code></pre>
  
  <pre class="lang-java prettyprint-override"><code>@ManagedBean
  public class ACtrlimplements Serializable {
      public void onChange(AjaxBehaviorEvent event) {
          System.out.println("something changed");
      }
  }
  </code></pre>
  
  <p>Adding multiple <code>f:ajax</code> elements doesn't seem to work (maybe it should?!), e.g. in</p>
  
  <pre><code>&lt;h:form&gt;
      &lt;h:inputText id="anId" value="#{cityCtrl.dbHost}"&gt;
          &lt;f:ajax event="change" listener="#{aCtrl.toggle}" execute="@all"/&gt;
          &lt;f:ajax event="change" listener="#{aCtrl.onChange}" execute="@all"/&gt;
          &lt;f:ajax event="change" listener="#{aCtrl.toggle}" execute="@all"/&gt;
      &lt;/h:inputText&gt;
  &lt;/h:form&gt;
  </code></pre>
  
  <pre class="lang-java prettyprint-override"><code>@ManagedBean
  public class ACtrlimplements Serializable {
      public void onChange(AjaxBehaviorEvent event) {
          System.out.println("something changed");
      }
  
      public void toggle(AjaxBehaviorEvent event) {
          System.out.println("blah");
      }
  }
  </code></pre>
  
  <p>only <code>ACtrl.onChange</code> is invoked.</p>