title: jsf ajax call: executing javascript function in the end
body: <p>I'm working with JSF 2.0 and here's my form:</p>
  
  <pre><code>&lt;h:form id="fff" onsubmit="reloadMap();"&gt;
      &lt;h:selectOneMenu value="#{rentCarPoolBean.state}"&gt;
          &lt;f:selectItems value="#{rentCarPoolBean.stateList}" id="stateList" /&gt;
          &lt;f:ajax event="change" render="cities stateSelected" onevent="showAlert"/&gt;
      &lt;/h:selectOneMenu&gt;
      &lt;h:selectOneMenu  id="cities" value="#{rentCarPoolBean.city}"&gt;
          &lt;f:selectItems value="#{rentCarPoolBean.cityList}"/&gt;
          &lt;/h:selectOneMenu&gt;
      &lt;h:outputText value="#{rentCarPoolBean.state}" id="stateSelected" /&gt;
  &lt;/h:form&gt;
  </code></pre>
  
  <p>And the javascript function:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      function showAlert(data){
           if (data.status == "complete")
               alert(document.getElementById("stateSelected"));   
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>What the above code does is on selecting a state from the first dropdown, it makes the ajax call and renders the 'cities' dropdown and the 'stateSelected' outputText.<br/><br/>
  Also, it calls the showAlert() javascript function.<br/><br/>
  What I want to do is call the javascript function after all the data is returned and both the dropdown and the outputText have been rendered.<br/><br/>
  But currently the javascript function is called before the elements are rendered and the alert displays <code>null</code>.
  How do we make the javascript function execute in the end?</p>