10 Replies Latest reply on Sep 3, 2007 5:24 PM by Nick Belaevski

    modalPanel problem

    Ross H Newbie

      I am trying to get the basic Exadel example code to work - http://livedemo.exadel.com/richfaces-demo/richfaces/modalPanel.jsf?c=modalPanel

      The problem I am having is that the panel's content is rendering along side of the link and then nothing renders on the panel when its invoked.

      What gives with the example code? My other rich tags are working fine.

      I have tried wrapping the content with <f:facet> but that didn't have any effect on how it rendered.

      <a href="javascript:Richfaces.showModalPanel('t1',{width:450, top:200})">CHCS_PATIENT

      <rich:modalPanel id="t1" minHeight="200" minWidth="450" height="200" width="500" zindex="2000">
      <f:facet name="header">
      <h:outputText value="Modal Panel Title" />
      </f:facet>
      <f:facet name="controls">
      <h:graphicImage value="/images/modal/close.png" style="cursor:pointer" onclick="Richfaces.hideModalPanel('t1')" />
      </f:facet>

      ... Content ...

      </rich:modalPanel>

        • 1. Re: modalPanel problem
          David Spark Newbie

          In your given code you don't close the a tag with a .

          Also it looks nicer if when you post you use the code tags for code :-)

          • 2. Re: modalPanel problem
            David Spark Newbie

            Sorry, meant to say close it with a "< /a>"

            • 3. Re: modalPanel problem
              Ross H Newbie

              Sorry, I do have the tag, so thats not my problem.

              <a href="javascript:Richfaces.showModalPanel('t1',{width:450, top:200})">PATIENT</a>
              


               <rich:modalPanel id="t1" minHeight="200" minWidth="450" height="200" width="500" zindex="2000">
               <f:facet name="header">
               <h:outputText value="Modal Panel Title" />
               </f:facet>
               <f:facet name="controls">
               <h:graphicImage value="/images/modal/close.png" style="cursor:pointer" onclick="Richfaces.hideModalPanel('t1')" />
               </f:facet>
               <f:facet name="content">
               <p>
               content
               </p>
               </f:facet>
               </rich:modalPanel>
              


              • 4. Re: modalPanel problem
                Ross H Newbie

                I have also tried this code without the tags around my content, which is how Exadel shows it, neither way works

                • 5. Re: modalPanel problem
                  David Spark Newbie

                  I've copied your code (minus the content facet tags) and it works fine on my setup.

                  What does the rest of your page code look like?

                  • 6. Re: modalPanel problem
                    Ross H Newbie

                     

                    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
                    <%@ page contentType="text/html; charset=ISO-8859-1" %>
                    <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
                    <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
                    <%@ taglib uri="http://java.sun.com/jstl/core" prefix="c" %>
                    <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
                    <%@ taglib uri="http://richfaces.ajax4jsf.org/rich" prefix="rich"%>
                    
                    <f:view>
                     <html>
                     <head>
                     <title>Default</title>
                     </head>
                     <body>
                     <rich:separator height="12"/>
                     <table border="1"><tr><td width="15%">
                     <table>
                     <tr>
                     <td height="60">
                     <a href="javascript:Richfaces.showModalPanel('t1',{width:450, top:200})">T1</a>
                     <rich:modalPanel id="t1" minHeight="200" minWidth="450" height="200" width="500" zindex="2000">
                     <f:facet name="header">
                     <h:outputText value="Modal Panel Title" />
                     </f:facet>
                     <f:facet name="controls">
                     <h:graphicImage value="/images/modal/close.png" style="cursor:pointer" onclick="Richfaces.hideModalPanel('t1')" />
                     </f:facet>
                     <p>
                    a little content
                     </p>
                     </rich:modalPanel>
                     </td>
                     </tr>
                     <tr>
                     <td height="60">
                     <a href="javascript:Richfaces.showModalPanel('t2',{width:450, top:200})">T2</a>
                     <rich:modalPanel id="t2" minHeight="200" minWidth="450" height="200" width="500" zindex="2000">
                     <f:facet name="header">
                     <h:outputText value="Modal Panel Title" />
                     </f:facet>
                     <f:facet name="controls">
                     <h:graphicImage value="/images/modal/close.png" style="cursor:pointer" onclick="Richfaces.hideModalPanel('t2')" />
                     </f:facet>
                     <p>
                    even more content
                     </p>
                     </rich:modalPanel>
                     </td>
                     </tr>
                     <tr>
                     <td height="60">
                     <a href="javascript:Richfaces.showModalPanel('t3',{width:450, top:200})">T3</a>
                     <rich:modalPanel id="t3" minHeight="200" minWidth="450" height="200" width="500" zindex="2000">
                     <f:facet name="header">
                     <h:outputText value="Modal Panel Title" />
                     </f:facet>
                     <f:facet name="controls">
                     <h:graphicImage value="/images/modal/close.png" style="cursor:pointer" onclick="Richfaces.hideModalPanel('t3')" />
                     </f:facet>
                     <p>
                    more content
                     </p>
                     </rich:modalPanel>
                     </td>
                     </tr>
                     <tr>
                     <td height="60">
                     <a href="javascript:Richfaces.showModalPanel('t4',{width:450, top:200})">T4</a>
                     <rich:modalPanel id="t4" minHeight="200" minWidth="450" height="200" width="500" zindex="2000">
                     <f:facet name="header">
                     <h:outputText value="Modal Panel Title" />
                     </f:facet>
                     <f:facet name="controls">
                     <h:graphicImage value="/images/modal/close.png" style="cursor:pointer" onclick="Richfaces.hideModalPanel('t4')" />
                     </f:facet>
                     <p>
                    content
                     </p>
                     </rich:modalPanel>
                     </td>
                     </tr>
                     </table>
                     </td></table>
                     </body>
                     </html>
                    </f:view>
                    



                    Output looks like this :
                    T1
                    a little content

                    T2
                    even more content

                    T3
                    more content

                    T4
                    content

                    • 7. Re: modalPanel problem
                      David Spark Newbie

                      Hmm, can't seem to get this to render at all with my setup :)

                      I do notice though that you've duplicated

                      <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>

                      Also your code:
                       </table>
                       </td></table>
                       </body>
                       </html>
                      </f:view>
                      

                      seems to be missing a closing tag and should be
                       </table>
                       </td></tr></table>
                       </body>
                       </html>
                      </f:view>
                      


                      • 8. Re: modalPanel problem
                        Ross H Newbie

                        I removed the extra taglib and fixed the unbalanced table tags and I still have this issue.

                        I have distilled the page down about as much as I can, and I am still seeing this behavior

                        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
                        <%@ page contentType="text/html; charset=ISO-8859-1" %>
                        <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
                        <%@ taglib uri="http://richfaces.ajax4jsf.org/rich" prefix="rich"%>
                        
                         <html>
                         <body>
                        <a href="javascript:Richfaces.showModalPanel('t1',{width:450, top:200})">Link to Content</a>
                         <rich:modalPanel id="t1" minHeight="200" minWidth="450" height="200" width="500" zindex="2000">
                         <f:facet name="header">
                         <h:outputText value="Modal Panel Title" />
                         </f:facet>
                         <f:facet name="controls">
                         <h:graphicImage value="/images/modal/close.png" style="cursor:pointer" onclick="Richfaces.hideModalPanel('t1')" />
                         </f:facet>
                         <p>
                        content
                         </p>
                         </rich:modalPanel>
                         </body>
                         </html>
                        


                        • 9. Re: modalPanel problem
                          David Spark Newbie

                          My setup is slightly different so I'm declaring name spaces in ui:composition tags but the main bulk of the code works fine so I'm not sure what the problem is I'm afraid :( Seems like it must be something related to your configuration elsewhere.

                          I don't think it's related to the problem but I notice that you're missing a namespace declaration for 'h' (for the h:graphicImage).

                          • 10. Re: modalPanel problem
                            Nick Belaevski Master

                            Hello!

                            Wrap non-JSF page fragments ( tags) into f:verbatim. That should solve the problem.