title: Xpages: Load field values on page when a value changes - bound to a bean
body: <p>Please see clarification at the botom of this email.</p>
  
  <p>I have an Xpage where the user will choose an employee, after which a series of employee dependent fields should populate. I have done this before when my source was a document, but now I am using Objects. My object is bound to a java bean. </p>
  
  <p><a href="https://i.stack.imgur.com/Hoeju.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Hoeju.jpg" alt="enter image description here"></a></p>
  
  <p>For some reason I cannot get the on change event to fire when the Employee Name changes; at other times I can get the event to fire, but when I try to send the selection to a java method to load the values, I cannot get the value of the field. </p>
  
  <p>What I think I have to do is put code in the onChange event of the employee field that grabs the value the user chose and then call a java method in my bean that will load the other employee values and then reload the panel. Boy, takes a long time even to write that! </p>
  
  <p>Any help would be greatly appreciated. </p>
  
  <pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
  &lt;xp:view
      xmlns:xp="http://www.ibm.com/xsp/core"
      xmlns:xc="http://www.ibm.com/xsp/custom"
      xmlns:xe="http://www.ibm.com/xsp/coreex"
      createForm="false"&gt;
      &lt;xp:panel
          id="pnlAll"&gt;
          &lt;xp:eventHandler
              event="refresh"
              submit="false"
              refreshMode="partial"
              loaded="false"/&gt;    
          &lt;xp:this.data&gt;
              &lt;xe:objectData
                  saveObject="#{javascript:tr.save()}"
                  var="tr"&gt;
                  &lt;xe:this.createObject&gt;&lt;![CDATA[#{javascript:var tr = new com.scoular.model.TerminationRequest();
  var unid = context.getUrlParameter("key")
  
  if (unid != "") {
      tr.loadByUnid(unid);
      viewScope.put("readOnly","Yes");
  } else {
      tr.create();
      viewScope.put("readOnly","No");
  }
  return tr;}]]&gt;&lt;/xe:this.createObject&gt;
              &lt;/xe:objectData&gt;
          &lt;/xp:this.data&gt;
          &lt;xp:div
              styleClass="container-fluid"
              id="divTravelRequest"&gt;
  
  
  
              &lt;div
                  class="panel panel-primary"
                  id="div6"&gt;
                  &lt;div
                      id="divEmployeeInfo"
                      class="panel-collapse collapse in"&gt;
                      &lt;div
                          class="panel-body"&gt; 
                          &lt;!--Row--&gt;
                          &lt;div
                              class="row"&gt;
                              &lt;div
                                  id="div2"&gt;
                                  &lt;div
                                      class="col-sm-6 pull-left"&gt;
                          &lt;xp:inputText
                          value="#{tr.employeeName}"
                          id="employeeName1"
                          style="width:300px"
                          xp:key="field"&gt;
                          &lt;xp:eventHandler
                              event="onchange"
                              submit="true"
                              refreshMode="norefresh"
                              id="eventHandler1"&gt;
                              &lt;xp:this.action&gt;&lt;![CDATA[#{javascript:var prmEmpNme:String = getComponent("employeeName1").getValue();
  var javaClass = new com.scoular.model.TerminationRequest();
  javaClass.setEmployeeData(prmEmpNme);}]]&gt;&lt;/xp:this.action&gt;
                          &lt;/xp:eventHandler&gt;
                          &lt;/xp:inputText&gt;
  
                      &amp;#160;&amp;#160;&amp;#160;
  
                      &lt;xe:namePicker
                          id="namePicker2"
                          dialogTitle="Select a Name"
                          for="employeeName1" rendered="false"&gt;
                          &lt;xe:this.dataProvider&gt;
                              &lt;xe:dominoNABNamePicker
                                  addressBookDb="bryansMac!!names.nsf"
                                  addressBookSel="db-name"
                                  nameList="people"
                                  people="true" /&gt;
                          &lt;/xe:this.dataProvider&gt;
                          &lt;xe:this.dojoAttributes&gt;
                              &lt;xp:dojoAttribute
                                  name="maxRowCount"
                                  value="1000" /&gt;
                          &lt;/xe:this.dojoAttributes&gt;
                      &lt;/xe:namePicker&gt;
  
                                              &lt;xp:listBox
                                                  xp:key="field"
                                                  id="listBoxEmpNme"
                                                  style="width: 100% !important;"
                                                  value="#{tr.employeeName}"&gt;
                                                  &lt;xp:selectItems&gt;
                                                      &lt;xp:this.value&gt;&lt;![CDATA[#{CacheBean.employees}]]&gt;&lt;/xp:this.value&gt;
                                                  &lt;/xp:selectItems&gt;
                                                  &lt;xp:eventHandler
                                                      event="onchange"
                                                      submit="true"
                                                      refreshMode="norefresh"&gt;
                                                      &lt;xp:this.action&gt;&lt;![CDATA[#{javascript:var scriptCode = "alert('This got fired')"
  view.postScript(scriptCode); }]]&gt;&lt;/xp:this.action&gt;
                                                  &lt;/xp:eventHandler&gt;&lt;/xp:listBox&gt;
  
                                              &lt;xp:div
                                          style="height:10.0px" /&gt;
  
  
  &lt;xp:scriptBlock id="scriptBlock2"&gt;
  &lt;xp:this.value&gt;&lt;![CDATA[$(document).ready(
  function() {
  x$( "#{id:listBoxEmpNme}" ).select2({
  placeholder: "Select The Scoular Employee To Term",
  allowClear: true
  });
  }
  );]]&gt;&lt;/xp:this.value&gt;
              &lt;/xp:scriptBlock&gt;                                       
              &lt;xp:div style="height:10.0px" /&gt;
              &lt;/div&gt;
                  &lt;div class="col-sm-6 pull-right"&gt;
  
                          &lt;xp:inputText
                                  id="inputText2"
                                  xp:key="field"
                                  value="#{tr.employeeLocation}"&gt;
                                  &lt;xp:this.disabled&gt;&lt;![CDATA[#{javascript:true}]]&gt;&lt;/xp:this.disabled&gt;
                                  &lt;/xp:inputText&gt;
                                  &lt;/div&gt;
  
                              &lt;/div&gt;
                          &lt;/div&gt;
  
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/xp:div&gt;
      &lt;/xp:panel&gt;
      &lt;/xp:view&gt;
  </code></pre>
  
  <p>============================</p>
  
  <p>The issue I have is that when the user changes the value of employeeName the partial refresh does fire, BUT value that has been changed [employeeName] is not reflected in the backing bean. If I can do this, then everything will be fine.</p>