jquery - What would be the best way to read values from <h:selectOneMenu /> to javascript function? -

i have jquery modal div displays on on-click event....

<div id="time_scheduler" style="display: none;" title="change event time"   class="dialog">     <div class="block">         <h:form>             <span>select shift</span>             <p></p>             <h:selectonemenu value="#{fieldcontroller.shift}">                 <f:selectitems itemlabel=" #{s.shiftname}  &nbsp; &nbsp; &nbsp;   #{s.starttime} #{s.endtime}" var="s" value="#{fieldcontroller.allshiftunfiltered}" />                  <f:converter converterid="shconvert" />             </h:selectonemenu>              <p></p>               <h:commandbutton onclick="getshift('#{request.contextpath}/changeevent?','#{fieldcontroller.shift.starttime}','#{fieldcontroller.shift.endtime}');" styleclass="btn btn-small" value="change" />         </h:form>     </div> </div> 

and javascript function in js file gets called in commandbutton , problem each time page displays , null on selectonemenu after click, later value, although inconsistent,

function getshift(url,start_time,end_time){     console.log('starttime '+start_time); //start time null on page first load     console.log('endtime '+end_time);     //end time null on first page load      $.ajax({         url: url + 'event_id=' + event_id + '&start_time=' + start_time + '&end_time=' + end_time,         cache: false,         success: function(value) {             console.log(value);           }     }); } 

i have converter class

@facesconverter(value = "shconvert") public class shiftconverter implements converter {     @override     public object getasobject(facescontext context, uicomponent component, string value) {         adminejb adm;         try {             adm = (adminejb) new initialcontext().lookup("java:global/ffm/adminejb");             return adm.findshift(value);         } catch (namingexception ex) {             return null;         }     }      @override     public string getasstring(facescontext context, uicomponent component, object value) {       return value.tostring();     } } 

which pretty conversion @ postconstruct level, best way pass values javascript function each time changed ?

the way commandbutton set make use last submitted values call javascript function. before addressing issue, may want understand relationship between el, jsf, , javascript. jsf takes facelet code , turns html. el statements resolved on server side @ time. so, when it's said , done, have html page can inspect in our favorite browser. comes javascript, has no awareness of jsf, works solely on rendered html page.

with in mind, can see why code above wouldn't work. el statements used argument getshift javascript function resolved when part of page rerendered server.

it objective here call non-jsf servlet asynchronously when button clicked. go little differently. have commandbutton call jsf method asynchronously, , method can reach out custom servlet.

<div id="time_scheduler" style="display: none;" title="change event time"   class="dialog"> <div class="block">     <h:form>         <span>select shift</span>         <p></p>         <h:selectonemenu value="#{fieldcontroller.shift}">             <f:selectitems itemlabel=" #{s.shiftname}  &nbsp; &nbsp; &nbsp;   #{s.starttime} #{s.endtime}" var="s" value="#{fieldcontroller.allshiftunfiltered}" />              <f:converter converterid="shconvert" />         </h:selectonemenu>          <p></p>           <h:commandbutton styleclass="btn btn-small" value="change">            <f:ajax execute="@form" listener="#{somebean.callservlet()} />         </h:commandbutton>     </h:form> </div> 

then, create backing bean method call servlet

@named public class somebean {     @inject fieldcontroller fieldcontroller;     public string callservlet() {       object starttime = fieldcontroller.shift.starttime;       object endtime = fieldcontroller.shift.endtime;        //call servlet here        return null;     } } 

here's example on calling servlet java.