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 Newbie

      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 Master

          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 Newbie

            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 Master

              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 Newbie

                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 Newbie

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

                  thanks for your help, ilya!