"Loading" Modal Div using IBM JSF

An easy way to disable the entire screen (prevent user input) while making an ajax call in ibm's jsf implementation : use a hx:panelDialog with your loading message, and use "show" and "hide" in the behaviorAction of the elements that trigger the ajax requests.

example :

<h:selectOneMenu id="selectTopic" styleClass="selectCombobox" value="#{myBean.topic}">
<f:selectItems value="#{myBean.allTopics}" id="selectTopics"/>
</h:selectOneMenu>
<hx:behavior event="onchange"
        target="selectTopic"
        behaviorAction="show;get;hide"
        targetAction="loading_modaldialog;pgLeafTopic;loading_modaldialog"
        id="selectTopicBehavior"></hx:behavior>
<h:panelGroup id="pgLeafTopic">
<h:selectOneMenu id="selectLeafTopic" styleClass="selectCombobox" value="#{myBean.leafTopic}">
    <f:selectItems value="#{myBean.leafTopics}" id="selectLeafTopics"/>
</h:selectOneMenu>                            
</h:panelGroup>
<hx:ajaxRefreshRequest
    target="pgLeafTopic" 
    id="ajaxRefreshRequest2"
    params="form1:selectTopic"
    >
</hx:ajaxRefreshRequest>
<hx:panelDialog id="loading_modaldialog"
for=""
           movable="false"
showTitleBar="false"
saveState="false">
           <h:outputText id="loadingdialogtext" value="Loading Data" />
</hx:panelDialog>

This will show and hide the modal div while the leafTopic dropdown gets a refresh depending on the selected topic in the first dropdown.