3 Replies Latest reply on Aug 11, 2011 12:57 PM by holyphoenix

    Open a Modal on combobox change?

    holyphoenix Newbie

      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       

                             

           

       

       

               

                             
        • 1. Re: Open a Modal on combobox change?
          liumin hu Master

          hi,

           

          show your page code, plz.

          • 2. Re: Open a Modal on combobox change?
            holyphoenix Newbie

            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]

            • 3. Re: Open a Modal on combobox change?
              holyphoenix Newbie

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