Open a Modal on combobox change?

[holyphoenix]

Hi, I have been playing around for about the last 5 hours trying to find a way to open a modal box when I change the combobox to one of the suggested values.  I currently have a combobox whose first selection is "Create a new Order."  The other suggestions are actual orders that exist in my test application.  I tried using a4jsupport to reRender the modalpanel and used the showWhenRendered="isNewOrder" attribute but it did not work.  I also tried using the onchange attribute of the combobox, and used an "if(#{backingBean.isNewOrder}) Richfaces.showModalPanel('newOrderModal')".  Neither way worked to show this modal panel.  Has anyone ever tried to do this before, have an example, or at least an idea on how I might be able to make this work?

Thanks,

HolyPhoenix       

                       

                       

[liuliu]

hi,

show your page code, plz.

[holyphoenix]

This is what I had last

For the combobox: [code]

<h:outputLabel for="pendingOrdersComboBox" value="Pending Order: " />

        <rich:comboBox id="pendingOrdersComboBox" required="true"

                       requiredMessage="Please select pending order."

                       value="#{orderBean.selectedOrder}"

                       immediate="true"

                       onchange="if(#{orderBean.isNewOrder}) #{rich:component('newOrderPanel')}.show()"

                       suggestionValues="#{orderBean.pendingOrdersList}"

                       directInputSuggestions="false"/>

            <a4j:support event="onchange" reRender="newOrderPanel" ajaxSingle="true"/>

        <h:message for="pendingOrdersComboBox" />[/code]

And for the modal

[code]

<rich:modalPanel id="newOrderPanel" autosized="true" style="z-index:9998" rendered="#{orderBean.isNewOrder}">

        <a4j:form>

            <rich:panel header="Order Information"

                        style="position:relative;top:5px; width:600px"

                        headerClass="head1">

                <h:outputText value="ALL FIELDS REQUIRED"

                              style="color:black;font-weight:bold;" />

                <h:panelGrid columns="3"

                             columnClasses="left_col, right_col, msg_col">

                    <h:outputLabel for="orderNameInput" value="Order Name:" styleClass="fieldStyle1"/>

                    <h:inputText id="orderNameInput" styleClass="inputText"

                                 value="#{orderSupport.currentOrder.orderName}"

                                 required="true"

                                 requiredMessage="A name must be given to the order."

                                 style="width:200px;margin-top:10px;margin-bottom:3px;"/>

                    <h:message for="orderNameInput"/>

<h:outputLabel for="orderNumInput" value="Purchased #:" styleClass="fieldStyle1"/>

                    <rich:inputNumberSpinner id="orderNumInput"

                                             required="true"

                                             requiredMessage="Please enter the number purchased."

                                             enableManualInput="true"

                                             minValue="0"

                                             maxValue="999999"

                                             value="#{orderBean.numberOrdered}"/>

                    <h:message for="orderNumInput"/>

<center>

                    <h:panelGrid columns="3">

                        <a4j:commandButton value="Save" styleClass="but_style1"

                                           style="margin-top:5px;width:70px;margin-right:10px;margin-left:15px;"

                                           actionListener="#{orderBean.performEventCaptureWithNewOrder}"

                                           status="waitStatus"

                                           reRender="editPanel, ordersPanel"

                                           oncomplete="if (#{facesContext.maximumSeverity==null}) #{rich:component('editPanel')}.hide();"/>

                        <a4j:commandButton value="Cancel" styleClass="but_style1"

                                           immediate="true"

                                           bypassUpdates="true"

                                           ajaxSingle="true"

                                           style="margin-top:5px;width:70px;margin-left: 30px"

                                           status="waitStatus"

                                           oncomplete="#{rich:component('newOrderPanel')}.hide();"/>

                    </h:panelGrid>

                </center>

            </rich:panel>

        </a4j:form>

</rich:modalPanel>[/code]

[holyphoenix]

Hi,  I was able to do what I want a different way.  Instead of having a new modal I just placed the fields from the modal on the page I was already on.  If a certain order is selected that is not new, then it fills out those fields automatically.  If a new one is created it will leave them blank for the user to fill out.

I did realize that my a4jsupport was not in the correct place.  I should have have the following format instead.

<rich:combobox stuff="stuff">

<a4jsupport stuff="stuff" />

</rich:combobox>

instead of

<rich:combobox stuff="stuff"/>

<a4jsupport stuff="stuff" />