jsf 2 - How to call listener or backing bean method after completing a javascript call in jsf? -

according scenario, need invoke javascript first. after javascript call 2 hidden values updated. updated hidden values , have call bean method. in scenario, getting called javascript , bean method @ same time. in bean method, not getting updated values in hidden fields.

little bit detail explanation

textbox(address) used type address. , having 2 hidden elements used store street name , city name based on address field.

by javascript call, collecting 2 values (street name , city name) google maps api (codeaddress()). based on entered address in textbox updating 2 hidden fields(street , city). bean method has handle updated hidden values.

but code, backing bean , java script called simultaneously. not getting updated value in backing bean.

my code following :

jsf code

<h:form prependid="false">     <div id="panel-one">         <h:outputlabel value="address"/>         <h:inputtext type="text" id="address" size="40" value="#{bean.address}"/>         <h:inputhidden id="street" value="#{bean.streetname}" />         <h:inputhidden id="city" value="#{bean.city}" />         <h:commandbutton type="submit" value="verify address"             onclick="checkaddress()">             <f:ajax execute="@form" render="@none" listener="#{bean.checkaddress()}"/>         </h:commandbutton>     </div> </h:form> 

javascript

checkaddress() {     document.getelementbyid("street").value = //setting value other javascript api;     document.getelementbyid("city").value = //setting value other javascript api; } 

in above javascript collecting values , setting 2 textbox. updated values again calling checkaddress() method in backing bean. fyi : *checkaddress()* ajax call. doing mistake in h:commandbutton of jsf , dont know how fix it. appreciated.

there're several things odd provided code:

• i don't see need prependid
• defining onclick on commandbutton bad idea[tm]
• you're setting and/or person inheriting code headache having js function and bean method both called checkaddress
• you don't seem based upon fired action? (having render="@none")

that said, kind of hack should need hiding actual button , clicking programmatically:

<h:form id="addrf">     <h:outputlabel value="address"/>     <h:inputtext type="text" id="address" size="40" value="#{bean.address}"/>     <button class="clickme">verify address</button>      <h:inputhidden id="street" value="#{bean.streetname}" />     <h:inputhidden id="city" value="#{bean.city}" />      <h:commandbutton id="submitbtn" style="display:none;">         <f:ajax execute="@form" render="@none" listener="#{bean.checkaddress()}"/>     </h:commandbutton> </h:form> <h:outputscript>     $(".clickme").click(function(ev) {         ev.preventdefault();         $.getjson(              "https://maps.googleapis.com/maps/api/geocode/json",               { address : $("#addrf\\:address").val() },              function(data) {                  // set street, city                  $('#addrf\\:submitbtn').click();              }          );     });  </h:outputscript> 

you want additional value validation, etc. , access maps api might different (i haven't used @ all). point is: need click() on hidden commandbutton after ajax call completed.