8 Replies Latest reply on Nov 6, 2015 5:15 AM by Michal Petrov

    JS called from modal popup hangs with status behind panel

    Arnie Morein Novice

      See the dialog below. If the user selects the class type, it should refresh the backing bean list for the related classes. I have these two (plus the dates) on a tab that serve as the search UI for the trainings taken and it works; and it works here in the modal panel.

       

      screenshot.jpg

       

      I'd like to do two things after the user selects a training type: move the focus to the class and open the popup.

       

      I've tried putting #{rich:component('id')}.focus(); and .showPopup(); in the oncomplete to no avail. I tried #{rich:findComponent and #{rich:element ... didn't work. See below.

       

      <ui:decorate id="decorTrainingEditTrainingType" template="/layout/edit.xhtml">
          <ui:define name="label"><h:outputLabel value="#{messages.getString('infoPersonTrainingEdit.label.trainingType')}" for="modalTrainingEditTrainingType"/></ui:define>
          <ui:define name="field">
              <rich:select id="modalTrainingEditTrainingType" value="#{infoPersonTrainingEdit.selectedTrainingType}" 
                  listWidth="250px" style="width:250px;" valueChangeListener="#{infoPersonTrainingEdit.refreshClassList}"
              >
                  <f:converter converterId="codeTrainingTypeConverter" 
                      binding="#{infoPersonTrainingEdit.codeTrainingTypeConverter}" />
                  <f:selectItems value="#{infoPersonTrainingEdit.codeTrainingTypeList}"
                      var="entity" itemValue="#{entity}" 
                      itemDisabled="#{entity.inactive}" 
                      itemLabel="#{entity.descriptionForList}" />
                  <a4j:ajax event="selectitem" execute="@this" 
                      oncomplete="#{rich:component('modalTrainingEditTrainingClass')}.focus();#{rich:component('modalTrainingEditTrainingClass')}.showPopup();"
                      render="decorTrainingEditTrainingClass,modalTrainingEditTrainingClass" />
              </rich:select>
          </ui:define>
          <ui:param name="required" value="true" />
          <ui:param name="fieldName" value="modalTrainingEditTrainingType" />
          <ui:param name="msgFieldName" value="msgModalTrainingEditTrainingType" />
      </ui:decorate>                
      
      

       

      What does happen is that the system bring up the default a4j:status that is defined (in a page header include) behind the edit dialog (the already dimmed background repaints), and nothing appears to have happened.

       

      Where am I going wrong?