5 Replies Latest reply on Apr 23, 2007 7:41 AM by moldovan

    javascript error in utils.js when using richfaces 3.0.1 snap

    moldovan

      Hy guys!

      I changed richfaces libary from 3.0.0 to a 3.0.1 snapshot from yesterday. With this snapshot, i get a javascript-error, when a page of my webapp becomes rendered. Thus my modalpanel(s) will not popup, because of an further js-error.

      This is a short cutout from firebug:


      elt has no properties
      getComputedStyle(null, "position")utils.js (line 3)
      onafterajax(Object markerId=div#contentform:accountinfocontent:popup)modalPanel.js (line 6)
      create()prototype.js (line 3)
      initialize("contentform:accountinfocontent:popup", Object width=450 height=250 minWidth=450 minHeight=250)modalPanel.js (line 9)
      create()prototype.js (line 3)
      [Break on this error] Richfaces.getComputedStyle=function(eltId,propertyName){var elt=$(eltId);if(elt....


      This error causes a further error, when clicking on a link to open the modalpanel (also cutout from firebug):

      panel has no properties
      showModalPanel("contentform:accountinfocontent:popup", Object width=450 top=250)modalPanel.js (line 59)
      [Break on this error] panel.modalPanel.show(opts);}


      With version 3.0.0 i had no problems.

      Has anyone an idea, what is going wrong?

        • 1. Re: javascript error in utils.js when using richfaces 3.0.1
          ilya_shaikovsky

          I haven't such problems with current SNAPSHOT. Post your code please. And check the Id you used in modal call.

          • 2. Re: javascript error in utils.js when using richfaces 3.0.1
            moldovan

            This is one of my sites, which is included in a tab from mainsite and has a modalPanel in it.

            <%@ 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://richfaces.ajax4jsf.org/rich" prefix="rich"%>
            
            <f:subview id="accountinfocontent">
             <rich:panel>
             <f:facet name="header">
             <h:outputText value="#{messages.accountinfo_title}" />
             </f:facet>
             <h:panelGrid columns="2">
             <h:panelGrid styleClass="text" columns="6" columnClasses="normalDisplayInPanelgrid_column, normalDisplayInPanelgrid_column, normalDisplayInPanelgrid_column, normalDisplayInPanelgrid_column">
             <h:outputText styleClass="text_bold" value="#{messages.accountinfo_label_accountnr}" />
             <h:outputText styleClass="text" value="#{customerObjects.account.accountNo}" />
             <h:outputText styleClass="text_bold" value="#{messages.accountinfo_label_autocollect}" />
             <h:outputText styleClass="text" value="#{customerObjects.account.autoCollect}" />
             <h:outputText styleClass="text_bold" value="#{messages.accountinfo_label_closed}" />
             <h:outputText styleClass="text" value="#{customerObjects.account.closed}" />
            
             <h:outputText styleClass="text_bold" value="#{messages.accountinfo_label_creditlimit}" />
             <h:outputText styleClass="text" value="#{customerObjects.account.creditLimit}" />
             <h:outputText styleClass="text_bold" value="#{messages.accountinfo_label_deposit}" />
             <h:outputText styleClass="text" value="#{customerObjects.account.deposit}" />
             <h:outputText styleClass="text_bold" value="#{messages.accountinfo_label_islocked}" />
             <h:outputText styleClass="text" value="#{customerObjects.account.isLocked}" />
            
             <h:outputText styleClass="text_bold" value="#{messages.accountinfo_label_openbalance}" />
             <h:outputText styleClass="text" value="#{customerObjects.account.openBalance}" />
             <h:outputText styleClass="text_bold" value="#{messages.accountinfo_label_serviceproviderid}" />
             <h:outputText styleClass="text" value="#{customerObjects.account.serviceProviderId}" />
             <h:outputText value=" "/>
             <h:outputText value=" "/>
             </h:panelGrid>
             <h:panelGrid styleClass="positiontop">
             <t:div style="margin-left: 20px; text-align: right;" >
             <h:panelGroup>
             <h:outputText style="text-decoration: underline" value="Kunden-Status:" />
             <h:outputText styleClass="text_14ptboldrightgreen" value=" #{customerObjects.account.accountStatus}" rendered="#{customerObjects.account.accountStatus == 'Active'}" />
             <h:outputText styleClass="text_14ptboldrightred" value=" #{customerObjects.account.accountStatus}" rendered="#{customerObjects.account.accountStatus != 'Active'}" />
             </h:panelGroup>
             </t:div>
             </h:panelGrid>
             </h:panelGrid>
             <h:panelGroup>
             <h:outputText styleClass="text" value="#{messages.accountinfo_button_blockaccount_label} --> " />
             <%--
             <h:commandLink styleClass="text" action="#{accountManagement.blockAccount}" onclick="link_saveActionPrevention(this,'#{messages.doubleclickprevention_alertwindow_value}');" onmouseover="return escape('#{messages.tooltip_clink_blockaccount}');" >
             <t:graphicImage value="images/icon_block.png" border="0" alt="" />
             </h:commandLink>
             --%>
            
             <h:outputLink value="javascript:Richfaces.showModalPanel('contentform:accountinfocontent:popup',{width:450, top:250})" onmouseover="return escape('#{messages.tooltip_clink_blockaccount}');" >
             <t:graphicImage value="images/icon_block.png" border="0" alt="" />
             </h:outputLink>
             <h:outputText styleClass="text" value=", "/>
             <h:outputText styleClass="text" value="#{messages.accountinfo_button_unblockaccount_label} --> " />
             <h:commandLink styleClass="text" action="#{accountManagement.unblockAccount}" onclick="link_saveActionPrevention(this,'#{messages.doubleclickprevention_alertwindow_value}');" onmouseover="return escape('#{messages.tooltip_clink_unblockaccount}');" >
             <t:graphicImage value="images/icon_unblock.png" border="0" alt="" />
             </h:commandLink>
            
             <h:panelGroup>
             <rich:modalPanel id="popup" minHeight="250" minWidth="450" height="250" width="450" zindex="2000">
             <f:facet name="header">
             <h:outputText value="#{messages.accountinfo_popup_headerlabel}" />
             </f:facet>
             <f:facet name="controls">
             <t:graphicImage border="0" value="images/icon_close.png" style="cursor:pointer" onclick="Richfaces.hideModalPanel('contentform:accountinfocontent:popup')" />
             </f:facet>
             <h:panelGrid>
             <h:panelGrid style="text-align: left; padding: 20px;">
             <f:facet name="header">
             <h:outputText style="color: red;" value="#{messages.popup_label_reason}" />
             </f:facet>
             <h:selectOneListbox style="width: 300px;" value="#{accountManagement.accountBlockReason.selected}" size="5" >
             <f:selectItems value="#{accountManagement.accountBlockReason.list}" />
             </h:selectOneListbox>
             </h:panelGrid>
             <h:panelGrid styleClass="positioning_verticalcenter">
             <h:commandLink action="#{accountManagement.blockAccount}" value="#{messages.accountinfo_button_blockaccount_label}" onclick="Richfaces.hideModalPanel('contentform:accountinfocontent:popup')" onmouseover="return escape('#{messages.tooltip_clink_blockaccount}');" />
             </h:panelGrid>
             </h:panelGrid>
             </rich:modalPanel>
             </h:panelGroup>
            
             </h:panelGroup>
             </rich:panel>
            
             <rich:spacer height="30" />
            
             <rich:panel>
             <f:facet name="header">
             <h:outputText value="#{messages.contactinfo_title}" />
             </f:facet>
             <h:panelGrid styleClass="text" style="position: top; vertical-align: top;" columns="2">
            
             <%-- ANFANG: Including the contacttypes --%>
             <h:panelGrid style="margin-top: 0px; padding-top: 0px;">
             <jsp:include page="TabbedPane_regulardata.jsp" />
             </h:panelGrid>
             <%-- ENDE: Including the contacttypes --%>
            
             <%-- ANFANG: displaying the subaccounts --%>
             <h:panelGrid style="margin-top: 0px; padding-top: 0px;">
             <t:dataTable id="subaccounttable" var="subaccount" value="#{customer.subaccounts}" rows="1" preserveDataModel="false" rendered="#{not empty customer.subaccounts}">
             <h:column>
             <t:panelTabbedPane styleClass="tabbedPane" serverSideTabSwitch="true" activeTabStyleClass="activeTab"
             inactiveTabStyleClass="inactiveTab" disabledTabStyleClass="disabledTab" activeSubStyleClass="activeSub"
             inactiveSubStyleClass="inactiveSub" tabContentStyleClass="tabContent" cellspacing="0">
             <t:panelTab id="tab" label="#{messages.contactpanel_tab_subaccount} #{subaccount.firstname} #{subacccount.lastname}">
             <h:panelGrid columns="2" style="font-size: 10pt;">
             <h:outputText value="ContactID - wird gelöscht werden!!!" />
             <h:inputText value="#{subaccount.contactID}" />
             <h:outputText value="#{messages.contactpanel_line1}" />
             <h:panelGroup>
             <h:inputText style="width: 30px;" value="#{subaccount.salutation}" />
             <h:inputText style="width: 30px;" value="#{subaccount.degree}" />
             </h:panelGroup>
             <h:outputText value="#{messages.contactpanel_line2}" />
             <h:panelGroup>
             <h:inputText style="width: 100px;" value="#{subaccount.firstname}" />
             <h:inputText style="width: 100px;" value="#{subaccount.lastname}" />
             </h:panelGroup>
             <h:outputText value="#{messages.contactpanel_line3}" />
             <h:panelGroup>
             <h:inputText style="width: 200px;" value="#{subaccount.street}" />
             <h:inputText style="width: 30px;" value="#{subaccount.streetnumber}" />
             </h:panelGroup>
             <h:outputText value="#{messages.contactpanel_line4}" />
             <h:panelGroup>
             <h:inputText style="width: 30px;" value="#{subaccount.country}" />
             <h:inputText style="width: 30px;" value="#{subaccount.zipcode}" /> <h:inputText style="width: 200px;" value="#{subaccount.city}" />
             </h:panelGroup>
             <h:outputText value="#{messages.contactpanel_line5}" />
             <h:panelGroup>
             <h:inputText style="width: 100px;" value="#{subaccount.telephone}" />
             <h:inputText style="width: 100px;" value="#{subaccount.mobilphone}" /> <h:inputText style="width: 100px;" value="#{subaccount.fax}" />
             </h:panelGroup>
             </h:panelGrid>
            
             <h:panelGroup>
             <h:commandLink style="font-size: 10pt;" value="#{messages.contactpanel_updatesubaccount}" action="#{customerModule.updateContact}" onclick="link_saveActionPrevention(this,'#{messages.doubleclickprevention_alertwindow_value}');" >
             <f:param name="ContactID" value="#{subaccount.contactID}" />
             </h:commandLink>
             </h:panelGroup>
             </t:panelTab>
             </t:panelTabbedPane>
             </h:column>
             </t:dataTable>
             <h:outputText value=" " rendered ="#{empty customer.subaccounts}" />
             </h:panelGrid>
             </h:panelGrid>
             </rich:panel>
             <rich:spacer height="30" />
             <rich:panel>
             <f:facet name="header">
             <h:outputText value="Activities" />
             </f:facet>
             <h:panelGroup>
             <jsp:include page="/ActivityManagement.jsp" />
             </h:panelGroup>
             </rich:panel>
            </f:subview>
            


            To say:
            All other included sites in the tabs of the main-site do have modalPanels. In these included sites the richfaces-modalPanel - Tags have always the same id in my code:

            <rich:modalPanel id="popup" minHeight="250" minWidth="450" height="250" width="450" zindex="2000">
            ..................
            </rich:modalPanel>

            --> All modalPanels have id="popup" in jsp-sites.
            Maybe, could this be the reason, why I'm getting the js-error???

            In generated html, every modal panel, has another id, because the way, myfaces is generating the id's.



            • 3. Re: javascript error in utils.js when using richfaces 3.0.1
              ilya_shaikovsky

              you may use just popup instead of full path. This mechanism was improved in 3.0.1.

              If this not acceptable try

              showModalPanel(':contentform:accountinfocontent:popup'...
              


              • 4. Re: javascript error in utils.js when using richfaces 3.0.1
                moldovan

                Tried:
                -) give each modalpanel another id (blockaccount_popup, blockproductsubscrption_popup,...)
                -) only display the AccountInfos.jsp - Site (I comment out all other tabs, including sites), so i only have 1 modalPanel definded
                -) call: showModalPanel('blockaccount',...)
                -) call: showModalPanel(':contentform:accountinfocontent:blockaccount_popup',..)

                all these doesn't help. I furthermore getting the js-error.

                • 5. Re: javascript error in utils.js when using richfaces 3.0.1
                  moldovan

                  I don't know what I have done, but i got it working!

                  thanks for your help, ilya!