5 Replies Latest reply on Apr 10, 2007 11:10 AM by Sergey Smirnov

    rich:modalPanel not working when including custom Facelets t

    Renzo Tomaselli Novice

      Hi, I'm trying to use rich:modalPanel with Facelets. This works:

      <rich:modalPanel id="modal">
       <a href ="javascript:Richfaces.hideModalPanel('modal')">Hide</a>
       <h:panelGrid columns="#{sessionBean.localeCount}">
       <c:forEach var="loc" items="#{sessionBean.locales}">
       <h:commandLink immediate="true" title="#{loc}" actionListener ="#{sessionBean.localeChanged}">
       <h:graphicImage value="#{sessionBean.map[loc]}" style="border: 0px"/>
       </h:commandLink>
       </c:forEach>
       </h:panelGrid>
      </rich:modalPanel>
      <script type="text/javascript">Richfaces.showModalPanel('modal')</script>
      

      but if I include internal stuff in a custom tag (a Facelet ui:component), then I have:
      <rich:modalPanel id="modal">
       <a href="javascript:Richfaces.hideModalPanel('modal')">Hide</a>
       <cx:locale/>
      </rich:modalPanel>
      <script type="text/javascript">Richfaces.showModalPanel('modal')</script>
      

      this doesn't work on FF, and inner contents are not rendered. Nor are any other custom tag I tried. The same components are rendered fine in any other context.
      Even worse: on IE 6/7, rendering is still missing, but after page display the browser shows a message error: IE cannot open the internet site ..., operation aborted. No errors on the Eclipse side, though.


        • 1. Re: rich:modalPanel not working when including custom Facele
          Renzo Tomaselli Novice

          Also I should specify that this behavior occurs with binaries from snapshot richfaces-3.0.1-20070402.000310-24-bin.zip.
          While using version 3.0.0 I get js errors:
          - elt has ho properties, from utils.js.faces line 3
          - panel has no properties, modalPanel.js.faces line 57

          • 2. Re: rich:modalPanel not working when including custom Facele
            Renzo Tomaselli Novice

            Well, I tried with today snapshot of both richfaces and ajax4jsf: much better !
            Rendering of embedded custom tags occurs, but:
            - contents style seems lost (only inside the panel).
            - IE still raises an error after display, as reported before.
            And btw, is there any way for the modal panel to autosize according to contents, if I don't specify any width/height ?

            • 3. Re: rich:modalPanel not working when including custom Facele
              Sergey Smirnov Master

              modal panel from snapshot requires its own h:form if you have a form element inside. Width and height are defined using css and initialized from parameters passed to showModalPanel

              • 4. Re: rich:modalPanel not working when including custom Facele
                Renzo Tomaselli Novice

                Thanks Sergey. To clarify: do I need to place such internal form even if this component is embedded into a higher level structure defining its own form ?
                (I remember that nested forms are not supported by html). Or do I have to rearrange the layout so that the modal panel becomes toplevel ?

                About size: I use dynamic components by ui:include, so that the modal panel does not know what it actually contains. Thus it's pretty complex to evaluate overall size of contents, to pass it to the panel. No automatic way there ?

                One final issue: my panel is visible according to having contents or not. This is driven by enclosing it into a c:if.
                When contents are closed by their own button, the c:if condition is driven to false, so that the panel will not be rendered anymore. This mechanism works fine to exit the modal condition, do I need to call hideModalPanel anyway or can I forget it ?

                • 5. Re: rich:modalPanel not working when including custom Facele
                  Sergey Smirnov Master

                   

                  "Tomarenz" wrote:
                  Thanks Sergey. To clarify: do I need to place such internal form even if this component is embedded into a higher level structure defining its own form ?
                  (I remember that nested forms are not supported by html). Or do I have to rearrange the layout so that the modal panel becomes toplevel ?


                  Yes, you need.
                  Due to the bug (feature) of IE, the content of the whole modal panel is moving up to the top of the browser DOM tree. So, the inner form will be outside of the external form you defined on the page.