title: How to call listener or backing bean method after completing a javascript call in jsf?
body: <p>According to my scenario, Need to invoke the javascript first. After the javascript call two hidden values will be updated. With the updated hidden values , have to call Bean method. In this scenario, I am getting called javascript and bean method at the same time. So In my bean method, I am not getting the updated values in the hidden fields.</p>
  
  <p><em><strong>Little bit detail explanation</em></strong></p>
  
  <p>Textbox(address) is used to type address. And having two hidden elements which will used to store street name and city name based on the address field. </p>
  
  <p>By the Javascript call, Collecting two values (Street name and City name) from the google maps API (<strong>codeAddress()</strong>). Based on the entered address in the textbox updating the two hidden fields(street and city). Bean method has to handle With the updated hidden values.</p>
  
  <p>But From my code, Backing bean and the java script is called simultaneously. So I am not getting the Updated value in the Backing Bean. </p>
  
  <p>My code is following :</p>
  
  <p><strong>JSF CODE</strong></p>
  
  <pre><code>&lt;h:form prependId="false"&gt;
      &lt;div id="panel-one"&gt;
          &lt;h:outputLabel value="ADDRESS"/&gt;
          &lt;h:inputText type="text" id="address" size="40" value="#{Bean.address}"/&gt;
          &lt;h:inputHidden id="street" value="#{Bean.streetName}" /&gt;
          &lt;h:inputHidden id="city" value="#{Bean.city}" /&gt;
          &lt;h:commandButton type="submit" value="Verify Address"
              onclick="checkAddress()"&gt;
              &lt;f:ajax execute="@form" render="@none" listener="#{Bean.checkAddress()}"/&gt;
          &lt;/h:commandButton&gt;
      &lt;/div&gt;
  &lt;/h:form&gt;
  </code></pre>
  
  <p><strong>Javascript</strong></p>
  
  <pre><code>checkAddress() {
      document.getElementById("street").value = //Setting value from other javascript API;
      document.getElementById("city").value = //Setting value from other javascript API;
  }
  </code></pre>
  
  <p>In the above javascript collecting values and setting it with two textbox. With the updated values again calling the <strong>checkAddress()</strong> method in backing bean. <strong>FYI :</strong> *<em>checkAddress()</em>* is a <strong>AJAX CALL</strong>. I am doing mistake in h:commandButton of JSF , but dont know how to fix it. Any help is much appreciated.</p>