10 Replies Latest reply on May 3, 2009 8:36 PM by Marco Lavecchia

    Problems with component CommandButton in the modalPanel

    Marco Lavecchia Newbie

      Hi..
      i have a problem with a compenent CommandButton in the modal Panel
      this is the code

      <rich:modalPanel id="panel" width="350" height="100" onbeforeshow="true" >
       <f:facet name="header">
       <h:panelGroup>
       <h:outputText value="Modifica Password"></h:outputText>
       </h:panelGroup>
       </f:facet>
       <f:facet name="controls">
       <h:panelGroup>
       <h:graphicImage value="/images/close.png" styleClass="hidelink" id="hidelink"/>
       <rich:componentControl for="panel" attachTo="hidelink" operation="hide" event="onclick"/>
       </h:panelGroup>
       </f:facet>
       <h:outputText value="#{vistaGestioneUtenti.stringaPassDaVerificare}" rendered="#{not empty vistaGestioneUtenti.stringaPassDaVerificare}" styleClass="messaggio_errore" />
       <h:form>
       <table>
       <tr>
       <td>
       <h:outputText value=" PASSWORD"/>
      
       </td>
       <td>
       <h:inputSecret value="#{vistaGestioneUtenti.utenteDaModificare.pass}" readonly="readonly" />
       </td>
       </tr>
       <tr>
       <td>
       <h:outputText value="REINSERISCI PASSWORD"/>
      
       </td>
       <td>
       <h:inputSecret value="#{vistaGestioneUtenti.stringaPassDaVerificare}" />
       </td>
       </tr>
      
       <tr>
       <td>
      
      
       </td>
       <td>
       <h:commandButton value="Modifica Password" action="#{controlloGestioneUtenti.modificaPassword}" />
       </td>
       </tr>
      
       </table>
      
       </h:form>
       </rich:modalPanel>


      the modal panel is correctely viewed, but when i push the command Button, the associate action (controlloGestioneUtenti.modificaPassword) does not work and the modal panel closes.
      what can the problem be?

        • 1. Re: Problems with component CommandButton in the modalPanel
          Nick Belaevski Master

          Hello,

          Modal panel closes because h:commandButton component reloads the whole page, and rich:modalPanel is closed by default.

          What is scope of "vistaGestioneUtenti" bean?

          • 2. Re: Problems with component CommandButton in the modalPanel
            Marco Lavecchia Newbie

            Hi .. thank you for your reply.
            the scope of "VistaGestioneUtenti" bean is "request",
            If the scope of "vistaGestioneUtenti" bean is "session", it doesn't work in the same way.

            <managed-bean>
             <managed-bean-name>vistaGestioneUtenti</managed-bean-name>
             <managed-bean-class>it.unibas.progetto.vista.vistaGestioneUtenti.VistaGestioneUtenti</managed-bean-class>
             <managed-bean-scope>request</managed-bean-scope>
             </managed-bean>


            I want the modalPanel to quit with a code inserted in the "modificaPassword" action.
            I want to be able to control modalPanel closure because I want to carry out verifications on the "Password" String.

            Can you write me an example of such a code?

            Many thanks again for your help.



            • 3. Re: Problems with component CommandButton in the modalPanel
              Nick Belaevski Master

               

              <c:set var="oncompleteVar" value="#{rich:component('panel')}.hide()"/>
              
               <rich:modalPanel id="panel">
               <h:form>
               <h:inputText value="#{forum5Bean.text}" />
               <a4j:commandButton value="validate" action="#{forum5Bean.validateText}" oncomplete="#{forum5Bean.validationOK ? oncompleteVar : ''}" />
               </h:form>
               </rich:modalPanel>
              
               <div onclick="#{rich:component('panel')}.show()">show panel</div>


              private String text;
              
               private boolean validationOK;
              
               public String getText() {
               return text;
               }
              
               public void setText(String text) {
               System.out.println("forum5Bean.setText() " + text);
               this.text = text;
               }
              
               public void validateText() {
               validationOK = "Secret".equals(this.text);
               }
              
               public boolean isValidationOK() {
               return validationOK;
               }
              
              


              Bean is request-scoped.

              • 4. Re: Problems with component CommandButton in the modalPanel
                Marco Lavecchia Newbie

                thanks for your help..

                in the Class ControlloGestioneUtenti, I have this code

                public void modificaPassword() {
                 logger.debug("SONO NEL METODO CAMBIO PASSWORD");
                 if (!this.vistaGestioneUtenti.getUtenteDaModificare().getPass().equals(this.vistaGestioneUtenti.getStringaPassDaVerificare())) {
                 this.vistaGestioneUtenti.setMessaggioVerificaPassword("INSERIRE DUE PASSWORD UGUALI");
                 logger.debug("attenzione password diverse");
                 } else {
                 // to do inserire codice per hash md5
                 this.vistaGestioneUtenti.setChiudiPannelloModale(true);
                 }
                 }


                in the jsf page the modalPanel is written this way

                <c:set var="oncompleteVar" value="#{rich:component('panel')}.hide()"/>
                
                 <rich:modalPanel id="panel" width="350" height="100">
                 <f:facet name="header">
                 <h:panelGroup>
                 <h:outputText value="Modifica Password"></h:outputText>
                 </h:panelGroup>
                 </f:facet>
                 <f:facet name="controls">
                 <h:panelGroup>
                 <h:graphicImage value="/images/close.png" styleClass="hidelink" id="hidelink"/>
                 <rich:componentControl for="panel" attachTo="hidelink" operation="hide" event="onclick"/>
                 </h:panelGroup>
                 </f:facet>
                 <h:outputText value="#{vistaGestioneUtenti.stringaPassDaVerificare}" rendered="#{not empty vistaGestioneUtenti.stringaPassDaVerificare}" styleClass="messaggio_errore" />
                 <h:form>
                 <table>
                 <tr>
                 <td>
                 <h:outputText value=" PASSWORD"/>
                
                 </td>
                 <td>
                 <h:inputSecret value="#{vistaGestioneUtenti.utenteDaModificare.pass}" readonly="readonly" />
                 </td>
                 </tr>
                 <tr>
                 <td>
                 <h:outputText value="REINSERISCI PASSWORD"/>
                
                 </td>
                 <td>
                 <h:inputSecret value="#{vistaGestioneUtenti.stringaPassDaVerificare}" />
                 </td>
                 </tr>
                
                 <tr>
                 <td>
                
                
                 </td>
                 <td>
                 <a4j:commandButton value="Modifica Password" action="#{controlloGestioneUtenti.modificaPassword}" oncomplete="#{vistaGestioneUtenti.chiudiPannelloModale ? oncompleteVar : ''}" />
                
                 </td>
                 </tr>
                
                 </table>
                
                 </h:form>


                in the "VistaGestioneUtenti" bean there is a boolean Property

                private boolean chiudiPannelloModale;
                with relative get and set Method.

                When I push the commandButton the modificaPassword() method verifies the passwords, and if they are equal, it sets the boolean property "chiudiPannelloModale" to true.
                The action doesn't work. I am not able to read the debug message
                "sono nel metodo ModificaPassword"
                What do you think the problem is?

                Many thanks for your prescious help!

                • 5. Re: Problems with component CommandButton in the modalPanel
                  Nick Belaevski Master

                  It's looking for ModificaPassword method. Maybe a typo on the page?

                  • 6. Re: Problems with component CommandButton in the modalPanel
                    Marco Lavecchia Newbie

                    Hi..
                    in my jsf page there are two commandButton

                    <a4j:commandButton value="Modifica Password" action="#{controlloGestioneUtenti.modificaPassword}" oncomplete="#{vistaGestioneUtenti.chiudiPannelloModale ? oncompleteVar : ''}" />
                    
                    <h:commandButton action="#{controlloGestioneUtenti.modificaUtente}" label="ModificaUtente " image="/images/icone_varie/refresh_48.png" />


                    in "controlloGestioneUtenti" bean there are more methods including

                    public void modificaUtente() {
                     this.messaggioErroreInserisciNuovoUtente = new ArrayList();
                    
                     Utente utente = this.vistaGestioneUtenti.getUtenteDaModificare();
                     if (utente.getNome() != null) {
                     if (utente.getNome().equals("")) {
                     Messaggio mess = new Messaggio();
                     mess.setMessaggio("Il Campo NOME non puo' essere vuoto");
                     this.messaggioErroreInserisciNuovoUtente.add(mess);
                     logger.debug("Metodo modifica utente - Nome nullo");
                     }
                     }
                    
                    public void modificaPassword() {
                     logger.debug("SONO NEL METODO CAMBIO PASSWORD");
                     if (!this.vistaGestioneUtenti.getUtenteDaModificare().getPass().equals(this.vistaGestioneUtenti.getStringaPassDaVerificare())) {
                     this.vistaGestioneUtenti.setMessaggioVerificaPassword("INSERIRE DUE PASSWORD UGUALI");
                     logger.debug("attenzione password diverse");
                     } else {
                     this.vistaGestioneUtenti.setChiudiPannelloModale(true);
                     }
                     }


                    First method work correctely, second method does not work.
                    the syntax seems correct( this is the my real code)
                    I'm confused.

                    Thank..


                    • 7. Re: Problems with component CommandButton in the modalPanel
                      Nick Belaevski Master

                      So, you have two buttons side by side and a4j:commandButton is the only one that is working?

                      • 8. Re: Problems with component CommandButton in the modalPanel
                        Marco Lavecchia Newbie

                        Hi again,
                        in my jsf page, I have two buttons:

                        1)

                        <a4j:commandButton value="Modifica Password" action="#{controlloGestioneUtenti.modificaPassword}

                        This button launches the method "modificaPassword()" and it does not work.
                        It is found in the modal panel.

                        2)
                        <h:commandButton action="#{controlloGestioneUtenti.modificaUtente}

                        This button launches the method "modificaUtente", and it works correctly.
                        It is found in a tag form.


                        Does this help at all?
                        Thanks again.

                        • 9. Re: Problems with component CommandButton in the modalPanel
                          Nick Belaevski Master

                          Please check that forms are not nested. Are there any JS errors in browser error console? Also add rich:messages component to the page and check if there any.

                          • 10. Re: Problems with component CommandButton in the modalPanel
                            Marco Lavecchia Newbie

                            Hi Nbelaevski,

                            the code of my jsf Page is:

                            <f:subview id="sottoSchermoModificaUtente">
                             <p><em><center> <strong> MODIFICA UTENTE </strong></center></em></p>
                             <h:form id="form_modificaUtente" enctype="multipart/form-data">
                             <table>
                             <tr>
                             <td>
                            
                             <h:commandButton value="Modifica Password" id="link" onclick="return false;" >
                             <rich:componentControl for="panel" attachTo="link" operation="show" event="onclick" />
                             </h:commandButton>
                            
                             </td>
                             </tr>
                             </table>
                             <h:commandButton action="#{controlloGestioneUtenti.modificaUtente}" label="ModificaUtente " image="/images/icone_varie/refresh_48.png" />
                             </h:form>
                            
                            <c:set var="oncompleteVar" value="#{rich:component('panel')}.hide()"/>
                             <rich:modalPanel id="panel" width="350" height="300">
                             <f:facet name="header">
                             <h:panelGroup>
                             <h:outputText value="Modifica Password"></h:outputText>
                             </h:panelGroup>
                             </f:facet>
                             <f:facet name="controls">
                             <h:panelGroup>
                             <h:graphicImage value="/images/close.png" styleClass="hidelink" id="hidelink"/>
                             <rich:componentControl for="panel" attachTo="hidelink" operation="hide" event="onclick"/>
                             </h:panelGroup>
                             </f:facet>
                             <h:outputText value="#{vistaGestioneUtenti.stringaPassDaVerificare}" rendered="#{not empty vistaGestioneUtenti.stringaPassDaVerificare}" styleClass="messaggio_errore" />
                             <h:form>
                             <h:panelGrid columns="3">
                            
                             <h:outputText value="Password:" />
                             <h:inputSecret label="Password" id="password" required="true" value="#{vistaGestioneUtenti.utenteDaModificare.pass}">
                             <f:validateLength minimum="5" />
                             </h:inputSecret>
                             <rich:message for="password">
                             <f:facet name="passedMarker">
                             <h:graphicImage value="/images/icone_varie/corretto.gif" />
                             </f:facet>
                             <f:facet name="errorMarker">
                             <h:graphicImage value="/images/icone_varie/errore.gif" />
                             </f:facet>
                             </rich:message>
                            
                            
                             <f:facet name="footer">
                             <a4j:commandButton value="Modifica Password " action="#{controlloGestioneUtenti.apriSchermoGestioneUtenti}" />
                             </f:facet>
                             </h:panelGrid>
                             </h:form>
                             </rich:modalPanel>
                            
                            </f:subview>


                            The forms are not nested.

                            If I insert two or zero characters in the password field, and I push the "Modifica Password" button,
                            the "corretto.jpg" icon appears every single time, meaning that the validation tag doesn't work.

                            In the error browser console there is a warning:
                            error in the interpretation of the 'filter' property. Declaration omitted

                            this is the code

                            .dr-mpnl-ovf-hd{overflow:hidden;}.dr-mpnl-trim{position:relative;z-index:0;}.dr-mpnl-iframe{position:absolute;left:0;top:0;background-color:white;overflow-y:hidden;z-index:-1;}.dr-mpnl-mask-div{position:fixed;top:0;left:0;border:0;margin:0;padding:0;width:100%;height:100%;border-style:none;background-color:#d0d0d0;}.dr-mpnl-mask-div-opaque{filter:alpha(opacity=50);opacity:.5;}.dr-mpnl-mask-div-transparent{background-color:transparent;}.dr-mpnl-panel{position:fixed;margin:0;padding:0;background-color:inherit;z-index:9;left:0;top:0;}.dr-mpnl-resizer{line-height:1px;font-size:1px;position:absolute;}.dr-mpnl-header{height:20px;width:100%;vertical-align:middle;z-index:5;}.dr-mpnl-pnl-button{outline-style:none;position:absolute;border:10px solid red;position:absolute;clip:rect(0px 0 1px 1px);height:10px;width:10px;left:0;top:0;z-index:-300;}.rich-mpnl-controls{position:absolute;top:3px;right:3px;z-index:1;}.rich-modalpanel{left:0;top:0;}.dr-mpnl-spacer,.dr-mpnl-resizer{background-image:url(/suitehotel/a4j/g/3_3_0.GAorg/richfaces/renderkit/html/images/spacer.gif.faces);}.dr-mpnl-pnl{border-width:1px;border-style:solid;padding:1px;background-color:inherit;}.dr-mpnl-pnl-h{padding:2px;border-width:1px;border-style:solid;background-position:top left;background-repeat:repeat-x;}.dr-mpnl-pnl-b{padding:10px;}.dr-mpnl-shadow{position:absolute;height:100%;width:100%;border:1px solid;z-index:-1;top:4px;left:4px;filter:alpha(opacity=10);opacity:.1;}.dr-mpnl-pnl{background-color:#FFF;border-color:#BED6F8;}.dr-mpnl-pnl-h{background-color:#BED6F8;border-color:#BED6F8;background-image:url(/suitehotel/a4j/g/3_3_0.GAorg.richfaces.renderkit.html.GradientA/DATB/eAH7!!3Tj2v7mAAZZAV3.faces);}.dr-mpnl-pnl-text{font-size:11px;color:#000;font-weight:bold;font-family:Arial,Verdana,sans-serif;}.dr-mpnl-pnl-b{font-size:11px;color:#000;font-family:Arial,Verdana,sans-serif;}.dr-mpnl-shadow{background-color:#000;border-color:#000;}


                            thank you for your help, once again.