11 Replies Latest reply on Apr 13, 2007 8:13 PM by sergeysmirnov

    modal outputPanel?

    snod0g

      i have an a4j:outputPanel with some outputText and inputText tags in it

      i want it to be initially hidden and when the user clicks a button it will popup as a modal dialog with a cancel button that will hide it again.

      any ideas on how to accomplish this?

        • 1. Re: modal outputPanel?

          why rich:modalPanel does not work for you in this use case?

          • 2. Re: modal outputPanel?
            snod0g

            i didnt know rich: tags are available in a4j? do i need to include the tag library? my code is below, basically the edit button will reRender the text fields in the outputpanel. but i want the outputpanel to be hidden initially and shown when edit is clicked




            <h:form>
             <a4j:jsFunction action="#{dataSourcesBean.refresh}" data="#{dataSourcesBean.xml}"
             name="loadInitialGrid" oncomplete="loadGridXml(data)"/>
             <a4j:jsFunction data="#{dataSourcesBean.name}" name="getSelected" reRender="tpanel">
             <a4j:actionparam name="id" assignTo="#{dataSourcesBean.name}"></a4j:actionparam>
             </a4j:jsFunction>
             <a4j:commandButton value="Retrieve" action="#{dataSourcesBean.refresh}" data="#{dataSourcesBean.xml}" oncomplete='loadGridXml(data)'/>
             <button type="button" onClick="editSelection();">Edit</button>
            
             <a4j:outputPanel id="tpanel">
             <br />
            <h:outputText value="Name"/><h:inputText id="ttext1" value="#{dataSourcesBean.dsi.name}"/><br>
            <h:outputText value="URL"/><h:inputText id="ttext2" value="#{dataSourcesBean.dsi.url}"/><br />
            <h:outputText value="Driver"/><h:inputText id="ttext3" value="#{dataSourcesBean.dsi.driver}"/>
             </a4j:outputPanel>


            • 3. Re: modal outputPanel?
              snod0g

              when it is shown i want it to be a "modal" popup

              • 4. Re: modal outputPanel?

                Hm. I did not realize you do not use RichFaces. It sounds strange for me. If somebody asked me what it more easier to drop one jar into classpath or implement modal panel from scratch, my answer might be done instantly.

                BWT, how about using the standard javascript confirm('are you sure?') function? It is a modal, appeared when you need, has Ok and Cancel button, returns false if user clicks cancel, so you can stop the request.

                • 5. Re: modal outputPanel?
                  snod0g

                  i dont want to do it from scratch :)

                  how can i import rich faces and use the modal panel to show the

                  <a4j:outputPanel id="tpanel">
                  as a modal popup?

                  thanks sergey

                  • 6. Re: modal outputPanel?

                    BWT, how about using the standard javascript confirm('are you sure?') function?

                    • 7. Re: modal outputPanel?
                      snod0g

                      because thats not what im trying to do.

                      im trying to show the input fields inside of a popup as a result of a button click

                      • 8. Re: modal outputPanel?

                        ok. So, you need to put your a4j:outputPanel inside the rich:modalPanel.

                        • 9. Re: modal outputPanel?
                          snod0g

                           

                          $(id) has no properties
                          [Break on this error] Richfaces.showModalPanel=function(id,opts){$(id).modalPanel.show(opts);}


                          • 10. Re: modal outputPanel?
                            snod0g

                            ok i fixed this by adding an id="form" to my h:form and then doing Richfaces.showModalPanel('form:mp',{width:450, top:50})

                            but my outputpanel isnt being rerendered like its supposed to by the

                            a4j:jsFunction data="#{dataSourcesBean.name}" name="getSelected" reRender="tpanel">
                             <a4j:actionparam name="id" assignTo="#{dataSourcesBean.name}"></a4j:actionparam>
                             </a4j:jsFunction>


                            here's all my code including some JS functions:

                             function editSelection () {
                            
                             getSelected (grid.getSelectionModel().getSelected().id);
                             Richfaces.showModalPanel('form:mp',{width:450, top:50})
                            
                             }
                             </script>
                            </head>
                            
                            <body onload="loadInitialGrid();">
                            
                            <h1>Datasources</h1>
                            
                            <div id="ds-grid" class="x-grid-mso" style="border: 1px solid #c3daf9; overflow: hidden; width:550px;"></div>
                            <br />
                            <f:view>
                             <h:form id="form">
                             <a4j:jsFunction action="#{dataSourcesBean.refresh}" data="#{dataSourcesBean.xml}"
                             name="loadInitialGrid" oncomplete="loadGridXml(data)"/>
                             <a4j:jsFunction data="#{dataSourcesBean.name}" name="getSelected" reRender="tpanel">
                             <a4j:actionparam name="id" assignTo="#{dataSourcesBean.name}"></a4j:actionparam>
                             </a4j:jsFunction>
                             <a4j:commandButton value="Retrieve" action="#{dataSourcesBean.refresh}" data="#{dataSourcesBean.xml}" oncomplete='loadGridXml(data)'/>
                             <button type="button" onClick="editSelection();">Edit</button>
                            
                             <rich:modalPanel moveable="true" id="mp" minHeight="200" minWidth="450" height="200" width="500" zindex="2000">
                             <a4j:outputPanel id="tpanel">
                             <br />
                             <h:outputText value="Name"/><h:inputText id="ttext1" value="#{dataSourcesBean.dsi.name}"/><br>
                             <h:outputText value="URL"/><h:inputText id="ttext2" value="#{dataSourcesBean.dsi.url}"/><br />
                             <h:outputText value="Driver"/><h:inputText id="ttext3" value="#{dataSourcesBean.dsi.driver}"/>
                             </a4j:outputPanel>
                             </rich:modalPanel>
                             </h:form>
                            </f:view>
                            



                            • 11. Re: modal outputPanel?

                              do you still use RichFaces 3.0.0 or one of the snapshots ?