7 Replies Latest reply on Nov 2, 2009 6:28 AM by jsfgeeks

    about modal panel

    jsfgeeks

      Hi all,

      I am using modal panel. I have 2 <rich:panelBarItem> within <rich:panelBar>. I have a modal panel inside the second <rich:panelBarItem>. So I want that when anyone clicks a particular button located inside the second <rich:panelBarItem>, the modal panel should be visible.

      I have done this, but the problem with it is, in IE(7) it works fine first time, but after clicking on that button, I go to first <rich:panelBarItem> and then again come to second <rich:panelBarItem> and click on the button, it's not showing the modal panel. And in Firefox it does not work at all. Not a single time.

      Any help will be appreciated.

      Thanks in advance,
      JSF GEEKS

        • 1. Re: about modal panel
          ilya_shaikovsky

          please add code snippets.

          • 2. Re: about modal panel
            jsfgeeks

             

            "ilya_shaikovsky" wrote:
            please add code snippets.


            Sure,

            Here is my jsp/component part:

            <rich:panelBar id="pnlbar_assign_car" style="text-align: center">
             <rich:panelBarItem label="Car Basic Details" id="pnlbaritm_car_basic_details" headerStyleActive="color: black" headerStyle="text-decoration: underline; font-size: 12px; color: gray">
            
             <h:panelGrid id="pnlgrid_details" columns="2" style="text-align: left; height: 100%; left: 70px; top: 20px; position: absolute" width="350px">
             <h:outputText id="outtxt_car_name" value="Car Name : " title="Name of Car" style="font-size: 13px"/>
             <h:inputText binding="#{car_creation.intxt_car_name}" id="intxt_car_name" maxlength="20" value="#{car_creation.car_name}" style="font-size: 13px; width: 143px">
             <a4j:support id="sprt_on_change_carname" event="onchange" immediate="true" action="#{car_creation.value_change_car_name}"/>
             </h:inputText>
             <h:outputText id="outtxt_car_desc" value="Description : " style="left: 30px; top: 25px; position: absolute; font-size: 13px"/>
             <h:inputTextarea binding="#{car_creation.inta_car_desc}" id="inta_car_desc" value="#{car_creation.car_desc}" immediate="false" style="left: 110px; top: 25px; position: absolute; font-size: 13px" rows="7" cols="40">
             <a4j:support id="sprt_on_change_car_desc" event="onchange" immediate="true" action="#{car_creation.value_change_car_desc}"/>
             </h:inputTextarea>
             </h:panelGrid>
             </rich:panelBarItem>
             <rich:panelBarItem binding="#{car_creation.pnlbaritm_add_car}" rendered="#{car_creation.rendered_false}" id="pnlbaritm_add_car" headerStyleActive="color: black" headerStyle="text-decoration: underline; font-size: 12px; color: gray" label="#{car_creation.pbi_add_car_heading}">
             <h:panelGrid id="pnlgrid_add" columns="2" style="text-align: left; height: 100%; left: 70px; top: 20px; position: absolute" width="350px">
             <h:outputText id="outtxt_car_make" value="Car Make : " title="Maker of Car" style="font-size: 13px"/>
             <h:inputText binding="#{car_creation.intxt_car_make}" id="intxt_car_make" maxlength="20" value="#{car_creation.car_make}" style="font-size: 13px; width: 143px">
             <a4j:support id="sprt_on_change_carmake" event="onchange" immediate="true" action="#{car_creation.value_change_car_make}"/>
             </h:inputText>
             <h:outputText id="outtxt_car_model" value="Car Model : " title="Model of Car" style="font-size: 13px"/>
             <h:inputText binding="#{car_creation.intxt_car_model}" id="intxt_car_model" maxlength="20" value="#{car_creation.car_model}" style="font-size: 13px; width: 143px">
             <a4j:support id="sprt_on_change_carmodel" event="onchange" immediate="true" action="#{car_creation.value_change_car_model}"/>
             </h:inputText>
             </h:panelGrid>
             <br/>
             <a4j:commandButton id="btn_create_car_finish"
             style="font-size: 12px; width: 100px"
             disabled="#{car_creation.btn_finish_car_disable}"
             title="Click to finish adding the car"
             value="Finish">
             <h:outputText id="btn_finish_car_disable_msg"
             value="#{car_creation.finish_btn_disable_msg}"
             style="color: gray; font-size: 12px"/>
            
            
             <rich:modalPanel id="panel" zindex="3000" minHeight="100" minWidth="350" width="380" height="100">
             <f:facet name="header">
             <h:panelGroup>
             <h:outputText value="Confirmation"></h:outputText>
             </h:panelGroup>
             </f:facet>
             <f:facet name="controls">
             <h:panelGroup>
             <h:graphicImage value="images/close.gif" styleClass="hidelink" id="hidelink"/>
             <rich:componentControl for="panel" attachTo="hidelink" operation="hide" event="onclick"/>
             </h:panelGroup>
             </f:facet>
             <br/>
             <h:outputText style="font-size: 12px" value="Are you sure you want to finish adding car ???"/>
             <br/><br/>
             <rich:spacer height="10" width="110"/>
             <a4j:commandButton id="btn_sure_yes" style="width: 60px" value="Yes"
             reRender="btn_finish_car_disable_msg"
             action="#{car_creation.action_finish_add_car}">
             <rich:componentControl for="panel" attachTo="btn_sure_yes" operation="hide" event="onclick"/>
             </a4j:commandButton>
             <rich:spacer height="10" width="20"/>
             <a4j:commandButton id="btn_sure_no" style="width: 60px" value="No">
             <rich:componentControl for="panel" attachTo="btn_sure_no" operation="hide" event="onclick"/>
             </a4j:commandButton>
             </rich:modalPanel>
             </rich:panelBarItem>
            </rich:panelBar>
            


            I think, there is no need of backbean code. Tell me if I made any mistake.

            Thanks for your support,
            JSF GEEKS

            • 3. Re: about modal panel
              ahoehma

              (This have nothing to do with your problem)
              I guess the <h:inputText/> doesn't have a "onchange" event ?!

              • 4. Re: about modal panel
                ilya_shaikovsky

                1) I can't see show() invocation code at all? What I'm missing?

                2) binding of the component should be request scoped. but rendered should be session scoped. And in your case both attributes mapped to the same bean - so one of the definitions is wrong anyway :)

                3) rich:modalPanel has limitations regarding form elements. please check developer guide on that.

                And I'm not sure why did you need all that bindings at all and why you using immediate at all supports.

                • 5. Re: about modal panel
                  ilya_shaikovsky

                   

                  "ahoehma" wrote:
                  (This have nothing to do with your problem)
                  I guess the <h:inputText/> doesn't have a "onchange" event ?!


                  it has.

                  • 6. Re: about modal panel
                    jsfgeeks

                     

                    "ilya_shaikovsky" wrote:
                    1) I can't see show() invocation code at all? What I'm missing?


                    Sorry,

                    My finish button code is something like,
                    <a4j:commandButton id="btn_create_car_finish"
                     style="font-size: 12px; width: 100px"
                     disabled="#{car_creation.btn_finish_car_disable}"
                     title="Click to finish adding car"
                     reRender="btn_finish_car_disable_msg"
                     action="#{car_creation.action_finish_new_car}"
                     value="Finish">
                     <rich:componentControl rendered="false" for="panel" attachTo="btn_create_car_finish" operation="show" event="onclick"/>
                    </a4j:commandButton>
                    


                    Sorry again for my previous mistake, otherwise the onchange event of inputText is working perfect. It was my mistake in pasting the code in previous post, but it is there in my code and as I wrote in previous post, I can see modal panel in IE first time, (more than 1 time, if I stay in second panel bar item and click on finish button again & again). But if I go to first panelBarItem after clicking on finish (at least once) and again come to secong panelBarItem and click on Finish button, then it's not showing.

                    Thanks again,
                    JSF GEEKS

                    • 7. Re: about modal panel
                      jsfgeeks

                      Sorry for dummy,

                      Don't consider rendered="false" in above post in <rich:componentControl/>. It was by mistake.