6 Replies Latest reply on Mar 14, 2007 3:57 PM by Nick Belaevski

    Js erro teting Modal Panel

    Arwen Newbie

      Hi,

      if found here one example of how to implement this componnent.
      I altered my source, but when I ckick on the link to open the modal, is don't works ok, and I see one js erro...
      The erros saids that is one error on line 46, so, I edit and view the source code, but is happend into default js functions...

      Does anybody has one idea for the error, or has the same expierence before ?

      My .jsf code is like:

      <rich:panel id="buttonsPanel">
      <h:panelGrid columns="2" >
      <h:commandButton id="back" action="go_back" value="#{labels['button_back']}" />
      <h:commandButton id="delete" action="#{handler.go_delete}" value="#{labels['button_delete']}" />
      </h:panelGrid>
      <f:verbatim>
      <a href="javascript:Richfaces.showModalPanel('Form:_panel',{left:'auto', top:'auto'})"> Show Modal Panel
      </f:verbatim>
      <rich:modalPanel id="_panel" minHeight="200" minWidth="450" height="200" width="500" zindex="999">
      <f:facet name="header">
      <h:outputText value="Modal Panel Title" />
      </f:facet>
      <f:facet name="controls">
      <h:commandButton id="ok" onclick="Richfaces.hideModalPanel('Form:_panel')" />
      </f:facet>
      <f:verbatim>
      <a href="javascript:Richfaces.hideModalPanel('Form:_panel')">Hide this panel
      </f:verbatim>
      </rich:modalPanel>
      </rich:panel>

      Thanks,
      Carla

        • 1. Re: Js erro teting Modal Panel
          Sergey Smirnov Master

          line 46 is ok, but what was the error message text?

          P.S. We highly recommend to place the modalPanel before </f:view> (if you have not it - before ) and have separate h:form for it. You should not use "Form:" prefix in this case also.

          • 2. Re: Js erro teting Modal Panel
            Arwen Newbie

            Hi,

            thanks for your help.

            It's an js alert error that I can see on the statusbar.

            Wenn I go to line 46, its shows just the header of a default js function... :(

            And the Form in my case, is the name of my Form.

            So, then i will try to do this steps as you sad, separate h:form for it.

            • 3. Re: Js erro teting Modal Panel
              Sergey Smirnov Master

              Speaking about separate form, I mean the h:form that is inside the modalPanel, but not outside of it

              • 4. Re: Js erro teting Modal Panel
                Arwen Newbie

                Hi,

                ok, I understand.

                I try now, do to a new test in a clean window, like this example:

                http://jboss.com/index.html?module=bb&op=viewtopic&t=103313&start=0&postdays=postDays&postorder=postOrder&highlight=highlight

                and my source is that:

                <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
                 pageEncoding="ISO-8859-1" %>
                <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
                <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
                <%@ taglib uri="http://myfaces.apache.org/tomahawk" prefix="t"%>
                <%@ taglib uri="http://myfaces.apache.org/sandbox" prefix="s"%>
                <%@ taglib uri="http://richfaces.ajax4jsf.org/rich" prefix="rich"%>
                
                <t:div styleClass="feature">
                 <t:panelGroup>
                 <t:outputText value="Title" />
                 </t:panelGroup>
                
                 <h:form id="confirm">
                 <t:div styleClass="story">
                 <rich:panel id="message">
                 <h:panelGrid columns="2" styleClass="borderTable" headerClass="panelHeading" >
                 <h:panelGrid columns="2" styleClass="borderTable" headerClass="panelHeading" >
                 <t:outputText value="Confirm Delete?" />
                 </h:panelGrid>
                 </h:panelGrid>
                 </rich:panel>
                 </t:div>
                
                 <t:div styleClass="story">
                 <rich:spacer width="1" height="10" title="1"/>
                 </t:div>
                
                 <t:div styleClass="actions">
                 <rich:panel id="buttons">
                 <h:panelGrid columns="2" styleClass="borderTable" headerClass="panelHeading">
                 <h:commandButton id="submit" action="#{bean.go_delete}" value="#{labels['button_submit']}" />
                 <h:commandButton id="cancel" action="go_cancel" value="#{labels['button_cancel']}" />
                 </h:panelGrid>
                 </rich:panel>
                 </t:div>
                 </h:form>
                
                 <h:form id="_form">
                 <rich:panel>
                 <f:facet name="header1">
                 <h:outputText value="Modal Panel"/>
                 </f:facet>
                 <f:verbatim>
                 <a href="javascript:Richfaces.showModalPanel('_form:_panel',{left:'auto', top:'auto'})">Show Modal Panel</a>
                 </f:verbatim>
                 <rich:modalPanel id="_panel" minHeight="200" minWidth="450" height="200" width="500" zindex="999">
                 <f:facet name="header2">
                 <h:outputText value="Modal Panel Title" />
                 </f:facet>
                 <f:facet name="controls">
                 <h:graphicImage value="/images/ico_close.gif" style="cursor:pointer" onclick="Richfaces.hideModalPanel('_form:_panel')" />
                 </f:facet>
                 <f:verbatim>
                 <a href="javascript:Richfaces.hideModalPanel('_form:_panel')">Hide this panel</a>
                 </f:verbatim>
                 </rich:modalPanel>
                 </rich:panel>
                </h:form>
                
                </t:div>


                But, when I will test, I have this error by Firefox console error:
                Fehler: $(id) has no properties
                Quelldatei: http://localhost:8080/ediweb/a4j.res/org/richfaces/renderkit/html/scripts/modalPanel.js.jsf
                Zeile: 45


                Richfaces.showModalPanel=function(id,opts){$(id).modalPanel.show(opts);}

                What I am doing wrong ?

                Thanks,
                Carla.

                • 5. Re: Js erro testing Modal Panel
                  Arwen Newbie

                  Hi,

                  I posted the incorrect source, before I remove the form...

                  This is the actual:

                  <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
                   pageEncoding="ISO-8859-1" %>
                  <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
                  <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
                  <%@ taglib uri="http://myfaces.apache.org/tomahawk" prefix="t"%>
                  <%@ taglib uri="http://myfaces.apache.org/sandbox" prefix="s"%>
                  <%@ taglib uri="http://richfaces.ajax4jsf.org/rich" prefix="rich"%>
                  
                  <t:div styleClass="feature">
                   <t:panelGroup>
                   <t:outputText value="Title" />
                   </t:panelGroup>
                  
                   <h:form id="confirm">
                   <t:div styleClass="story">
                   <rich:panel id="message">
                   <h:panelGrid columns="2" styleClass="borderTable" headerClass="panelHeading" >
                   <h:panelGrid columns="2" styleClass="borderTable" headerClass="panelHeading" >
                   <t:outputText value="Confirm Delete?" />
                   </h:panelGrid>
                   </h:panelGrid>
                   </rich:panel>
                   </t:div>
                  
                   <t:div styleClass="story">
                   <rich:spacer width="1" height="10" title="1"/>
                   </t:div>
                  
                   <t:div styleClass="actions">
                   <rich:panel id="buttons">
                   <h:panelGrid columns="2" styleClass="borderTable" headerClass="panelHeading">
                   <h:commandButton id="submit" action="#{bean.go_delete}" value="#{labels['button_submit']}" />
                   <h:commandButton id="cancel" action="go_cancel" value="#{labels['button_cancel']}" />
                   </h:panelGrid>
                   </rich:panel>
                   </t:div>
                   </h:form>
                  
                   <h:form id="_form">
                   <rich:panel>
                   <f:facet name="header1">
                   <h:outputText value="Modal Panel"/>
                   </f:facet>
                   <f:verbatim>
                   <a href="javascript:Richfaces.showModalPanel('_panel',{width:450, top:200})">Show Modal Panel</a>
                   </f:verbatim>
                   <rich:modalPanel id="_panel" minHeight="200" minWidth="450" height="200" width="500" zindex="999">
                   <f:facet name="header2">
                   <h:outputText value="Modal Panel Title" />
                   </f:facet>
                   <f:facet name="controls">
                   <h:graphicImage value="/images/ico_close.gif" style="cursor:pointer" onclick="Richfaces.hideModalPanel('_panel')" />
                   </f:facet>
                   <f:verbatim>
                   <a href="javascript:Richfaces.hideModalPanel('_panel')">Hide this panel</a>
                   </f:verbatim>
                   </rich:modalPanel>
                   </rich:panel>
                  </h:form>
                  
                  </t:div>


                  and the error:
                  Fehler: $(id) has no properties
                  Quelldatei: http://localhost:8080/ediweb/a4j.res/org/richfaces/renderkit/html/scripts/modalPanel.js.jsf
                  Zeile: 45


                  the source code error:

                  Richfaces.showModalPanel=function(id,opts){$(id).modalPanel.show(opts);}




                  • 6. Re: Js erro teting Modal Panel
                    Nick Belaevski Master

                    Carla,

                    the right code to close/open panel should be:
                    <a href="javascript:Richfaces.showModalPanel('_form:_panel',{width:450, top:200})">Show Modal Panel
                    ...
                    <a href="javascript:Richfaces.hideModalPanel('_form:_panel')">Hide this panel

                    note "_form" prefix in panel element id.

                    Can you please save the page you have problems with as HTML and send it to me: nbelaevski at exadel.com ?