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

    modal outputPanel?

    joe blah Newbie

      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?
          Sergey Smirnov Master

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

          • 2. Re: modal outputPanel?
            joe blah Newbie

            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?
              joe blah Newbie

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

              • 4. Re: modal outputPanel?
                Sergey Smirnov Master

                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?
                  joe blah Newbie

                  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?
                    Sergey Smirnov Master

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

                    • 7. Re: modal outputPanel?
                      joe blah Newbie

                      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?
                        Sergey Smirnov Master

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

                        • 9. Re: modal outputPanel?
                          joe blah Newbie

                           

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


                          • 10. Re: modal outputPanel?
                            joe blah Newbie

                            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?
                              Sergey Smirnov Master

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