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

    JS called from modal popup hangs with status behind panel

    arnieaustin

      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?

        • 1. Re: JS called from modal popup hangs with status behind panel
          michpetrov

          What component is "modalTrainingEditTrainingClass"?

          • 2. Re: JS called from modal popup hangs with status behind panel
            arnieaustin

            rich:select

            • 3. Re: JS called from modal popup hangs with status behind panel
              michpetrov

              Right, I didn't notice you're targeting the same component. Are you sure the code is not executing? The oncomplete code will be in the server response, you can check if it's correct (or change it to something you can easily verify, like console.log). The popup isn't shown if the list is empty, otherwise there shouldn't a problem.

              • 4. Re: JS called from modal popup hangs with status behind panel
                arnieaustin

                Ok, doing the a4j:ajax event="selectitem" ... below's oncomplete logic:

                 

                <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>    
                

                 

                Appears to make the pop-up appear when there is classes in the list - but only for a second. Unless, there is only ONE item in the list, in which case it stays open.

                 

                Any ideas?

                • 5. Re: JS called from modal popup hangs with status behind panel
                  michpetrov

                  A blur event would hide it, try to debug the JavaScript to see what's triggering it, the method is _hidePopup() in select.js

                  • 6. Re: JS called from modal popup hangs with status behind panel
                    arnieaustin

                    That I wouldn't know where to start at, unfortunately. My JS knowledge is near to nil. From what I can see on the screen though, if it is a blur, it is a result of the global a4j:status appearing and taking the focus.

                     

                    Any suggestions on how to suppress a global status for a control? I tried an empty value:

                     

                    <a4j:ajax event="selectitem" execute="@this" render="decorTrainingClass,searchTrainingClass" status="" />

                     

                    which is within the rich:select in question, but it still looses the focus for a second thanks to the status.

                    • 7. Re: JS called from modal popup hangs with status behind panel
                      arnieaustin

                      But to the initial request - I have it changing the focus from the class type to the class DDL and opening the popup.

                      • 8. Re: JS called from modal popup hangs with status behind panel
                        michpetrov

                        What does the status do? An element popping up will not shift the focus. If you can come up with a reproducer I can take a look at it, otherwise I'm just guessing.