5 Replies Latest reply on Apr 4, 2008 7:40 PM by Kerdudou Ronan

    javascript error in richfaces

    Kerdudou Ronan Apprentice

      I've got the folowing issue message :

      in : framework.pack.js.jsf (line 2201)
      
      2199 }catch(A){LOG.debug("XmlHttpRequest not support setRequestHeader - use GET instead of POST");
      2200 this._request.open("GET",this._query.getActionUrl("")+"?"+this._query.getQueryString(),true)
      2201 }this._request.send(this._query.getQueryString());
      2202 if(this._timeout>0){this._timeoutID=window.setTimeout(function(){LOG.warn("request stopped due to timeout");
      2203 if(!C._aborted){A4J.AJAX.status(C.containerId,C.options.status,false);
      
      error :
      [Exception... "'Permission refusee de modifier la propriete XULElement.selectedIndex' when calling method:
       [nsIAutoCompletePopup::selectedIndex]" nsresult: "0x8057001e (NS_ERROR_XPC_JS_THREW_STRING)" location:
       "JS frame :: http://virage.pm-dev.com/MonitorMakerWeb/a4j_3_2_0-SNAPSHOT/org/richfaces/ui.pack.js.jsf :: anonymous :: line 676" data: no]
       http://virage.pm-dev.com/MonitorMakerWeb/a4j_3_2_0-SNAPSHOT/org/richfaces/ui.pack.js.jsf
       Line 676
      
      670 if(A.mpUseExpr){A.mpLeft=B
      671 }else{A.style.left=B+"px"
      672 }},setTop:function(B){var A=$(this.cdiv);
      673 if(A.mpUseExpr){A.mpTop=B
      674 }else{A.style.top=B+"px"
      675 }},firstOnfocus:function(A){var B=$(this.firstHref);
      676 if(B){B.focus()
      677 }},lastOnfocus:function(A){var B=$(this.lastHref);
      678 if(B){B.focus()
      679 }},processAllFocusElements:function(A,C){if(A.focus&&/^(?:a|input|select|button|textarea)$/i.test(A.tagName)
      &&!A.disabled&&!/^hidden$/.test(A.type)&&Element.visible(A)){C.call(this,A)
      680 }else{if(A!=this.id){var B=A.firstChild;

      I use RF 3.2.0 and i haven't tested on previous version

      first question (minor) : why "a4j_3_2_0-SNAPSHOT" in the url since i'm using 3.2.0-GA release.

      and then.... why it does this error ?

      -> i'm just trying to clic on an input of a form in a simple page after closing a modal panel.



        • 1. Re: javascript error in richfaces
          Kerdudou Ronan Apprentice

          since i use LoadScriptStrategy ALL it was not clear, so, i reproduce without it :

          [Exception... "'Permission refusee de modifier la propriete XULElement.selectedIndex' when calling method:
           [nsIAutoCompletePopup::selectedIndex]" nsresult: "0x8057001e (NS_ERROR_XPC_JS_THREW_STRING)" location:
           "JS frame :: http://virage.pm-dev.com/MonitorMakerWeb/a4j_3_2_0-SNAPSHOTorg/richfaces/renderkit/html/scripts/modalPanel.js.jsf
           :: anonymous :: line 345" data: no]
          http://virage.pm-dev.com/MonitorMakerWeb/a4j_3_2_0-SNAPSHOTorg/richfaces/renderkit/html/scripts/modalPanel.js.jsf
          Line 345
          
          342 firstOnfocus: function(event) {
          343 var e = $(this.firstHref)
          344 if (e) {
          345 e.focus();
          346 }
          347 },


          • 2. Re: javascript error in richfaces
            Kerdudou Ronan Apprentice

            my jsf file :

            ...
            <body>
             <h:form id="formConnexion" onsubmit="return validerForm();">
             ...
             <h:inputText styleClass="login_input" id="utilisateur" value="#{connexion.utilisateur}" />
             <h:message errorClass="erreur" for="utilisateur" />
             <br />
             <h:inputSecret styleClass="login_input" id="mot_de_passe" value="#{connexion.motDePasse}" />
             <h:message errorClass="erreur" for="mot_de_passe" />
             <br />
             <h:commandButton value="CONNEXION" action="#{connexion.connecter}" styleClass="login_btn"/>
             </h:form>
             <div id="hiddenDiv" style="hiddenDiv">
             <jsp:include page="/inc/alertes.inc.jsp" />
             </div>
            </body>
            alertes.inc.jsp :
            <a4j:form id="form_alertes" ajaxSubmit="true" ignoreDupResponses="true">
             <a4j:outputPanel id="alertes" ajaxRendered="true">
            
             <rich:modalPanel id="alertes_modal" minHeight="150" minWidth="150" height="200" width="550" zindex="500000">
             <f:facet name="header">
             <h:panelGroup>
             <%--TODO i18n --%>
             <h:outputText value="Attention..." />
             </h:panelGroup>
             </f:facet>
             <f:facet name="controls">
             <h:panelGroup>
             <%-- pngfix pour IE6 ne fonctionne pas dans les rich:modalPanel donc on met une gif un peu moins belle --%>
             <h:graphicImage value='#{contexte.icones["Close.gif"]}'
             style="cursor:pointer;"
             onclick="pv_closeAlertesModal();return false;" />
             </h:panelGroup>
             </f:facet>
             <h:panelGrid width="90%">
             <center>
             <%-- Affichage des erreurs jsp --%>
             <h:panelGroup rendered="#{! empty facesContext.maximumSeverity}">
             <%--h:outputText value="#{libelles.ERR_PROBLEME_TECHNIQUE}" /--%>
             <h:messages id="erreur"
             layout="table"
             errorClass="erreurGlobale"
             warnClass="warningGlobal"
             showSummary="true"
             showDetail="true"
             tooltip="true" /><%--globalOnly="true"--%>
             <br/>
             <h:commandLink styleClass="cssbutton" value="Fermer" onclick="pv_closeAlertesModal(); return false;" />
             </h:panelGroup>
            
             <%-- Alerte des erreur fonctionnelles --%>
             <h:panelGroup rendered="#{contexte.beanContexte.messagesErreur_size!=0}">
             <h:outputText value="#{contexte.beanContexte.alertesErreur}" escape="false" />
             <br/>
             <h:commandLink styleClass="cssbutton" value="Fermer" onclick="pv_closeAlertesModal(); return false;" />
             </h:panelGroup>
            
            ...
            
             </center>
             </h:panelGrid>
             </rich:modalPanel>
            
             <%-- Affichage des erreurs jsp --%>
             <h:panelGroup rendered="#{! empty facesContext.maximumSeverity}">
             <script language="JavaScript" type="text/javascript">
             //jsp error
             jQuery(document).ready(function(){ Richfaces.showModalPanel('alertes_modal'); });
             </script>
             </h:panelGroup>
            
             <%-- Alerte des erreur fonctionnelles --%>
             <h:panelGroup rendered="#{contexte.beanContexte.messagesErreur_size!=0}">
             <script language="JavaScript" type="text/javascript">
             //erreur fonctionnelle
             jQuery(document).ready(function(){ Richfaces.showModalPanel('alertes_modal'); });
             </script>
             </h:panelGroup>
            
            ...
            
             </a4j:outputPanel>
            
             <a4j:jsFunction name="pv_closeAlertesModal"
             action="#{contexte.beanContexte.nettoyerMessages}"
             oncomplete="Richfaces.hideModalPanel('alertes_modal')"/>
            </a4j:form>


            • 3. Re: javascript error in richfaces
              Kerdudou Ronan Apprentice

              to explain a little more my page and the issue :
              it's the login page, the inputText can have required=true, when logging if a validation error (no name/pwd) or a login error occurs (wrong name/pwd) the n the error message apears in a rich:modalpanel. when i close this panel an ajax request is sent to inform the server that the message has been read and then the panel disapear. But when i clic on the input "utilisateur" to retype my user name, the javascript error occurs and the focus isn't set on the input...

              • 4. Re: javascript error in richfaces
                Sergey Smirnov Master

                At least you ignored the rules of the thumb for rich:modalPanel

                If modal panel has form elements on it:
                1. modal panel must have its own h:form (or a4j:form if needs)
                1. modal panel must NOT be inside the other form (nested forms are not allowed in JSF)

                • 5. Re: javascript error in richfaces [SOLVED - was my fault - n
                  Kerdudou Ronan Apprentice

                  No, it was something else or perhaps 2 reasons. But what you said helped, after having changed the code several times it's now better, and it works.

                  I think the issue was comming from the a4j:outputPanel with ajaxRendered="true" surrounding the rich:modalpanel.

                  i moved it inside the modalpanel and now it's good.
                  (the form was useless for this panel)

                  the error was very weird, but next time i'll have one like that i'll think again about the order of events ans the state of DOM when they occurs watching carefully re-rendered areas...

                  for people who are looking for codes that works, here is my new alertes.inc.jsp file:

                  ...<rich:modalPanel id="alertes_modal" minHeight="150" minWidth="150" height="200" width="550" zindex="500000">
                   <f:facet name="header">
                   <h:panelGroup>
                   <%--TODO i18n --%>
                   <h:outputText value="Attention..." />
                   </h:panelGroup>
                   </f:facet>
                   <f:facet name="controls">
                   <h:panelGroup>
                   <%-- pngfix pour IE6 ne fonctionne pas dans les rich:modalPanel donc on met une gif un peu moins belle --%>
                   <h:graphicImage value='#{contexte.icones["Close.gif"]}'
                   style="cursor:pointer;"
                   onclick="pv_closeAlertesModal();" />
                   </h:panelGroup>
                   </f:facet>
                   <h:panelGrid width="90%">
                   <center>
                  
                   <%-- on doit rafraichir les messages d'erreur a chaque requete ajax --%>
                   <a4j:outputPanel id="alertes_content" ajaxRendered="true">
                  
                   <%-- Affichage des erreurs jsp --%>
                   <h:panelGroup rendered="#{! empty facesContext.maximumSeverity}">
                   <%--affichage de la boite modale --%>
                   <script language="JavaScript" type="text/javascript">
                   jQuery(document).ready(function(){ Richfaces.showModalPanel('alertes_modal'); });
                   </script>
                   <%--h:outputText value="#{libelles.ERR_PROBLEME_TECHNIQUE}" /--%>
                   <h:messages id="erreur"
                   layout="table"
                   errorClass="erreurGlobale"
                   warnClass="warningGlobal"
                   showSummary="true"
                   showDetail="true"
                   tooltip="true" /><%--globalOnly="true"--%>
                   <br/>
                   <h:outputLink styleClass="cssbutton" value="#"
                   onclick="pv_closeAlertesModal(); return false;" >
                   <h:outputText value="Fermer" />
                   </h:outputLink>
                   </h:panelGroup>
                  
                   <%-- Alerte des erreur fonctionnelles --%>
                   <h:panelGroup rendered="#{contexte.beanContexte.messagesErreur_size!=0}">
                   <%--affichage de la boite modale --%>
                   <script language="JavaScript" type="text/javascript">
                   jQuery(document).ready(function(){ Richfaces.showModalPanel('alertes_modal'); });
                   </script>
                   <h:outputText value="#{contexte.beanContexte.alertesErreur}" escape="false" />
                   <br/>
                   <h:outputLink styleClass="cssbutton" value="#"
                   onclick="pv_closeAlertesModal(); return false;" >
                   <h:outputText value="Fermer" />
                   </h:outputLink>
                   </h:panelGroup> ... </a4j:outputPanel>
                   </center>
                   </h:panelGrid>
                  </rich:modalPanel>
                  
                  <a4j:form id="form_alertes" ajaxSubmit="true" ignoreDupResponses="true">
                   <a4j:jsFunction name="pv_closeAlertesModal"
                   action="#{contexte.beanContexte.nettoyerMessages}"
                   oncomplete="Richfaces.hideModalPanel('alertes_modal')"/>
                  </a4j:form>