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.

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?

[michpetrov]

What component is "modalTrainingEditTrainingClass"?

[arnieaustin]

rich:select

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

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

[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

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

[arnieaustin]

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

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