5 Replies Latest reply on Jul 20, 2011 6:30 AM by mp911de

    h:commandButton not worked in modalPanel

    jackrobert1985

      Hi,

       

      h:commandButton action not worked in modalPanel.

       

      I am using Netbeans IDE7 and Tomcat 6.0.29 , richfaces finall 3.3.3 jars

       

      I am using t:inputFileUpload component for upload file.   In my richModalPanel have one <h:commandButton/>.

       

      My requirement :  After browse the file,  and click commandBuuton, then i want to show the selected file name in ModalPanel.

       

      My problem is :

      When i click commandbutton in modalPanel, not called commandButton action in bean, and automattically close the modalPanel.

      In that action method starting...just i put System.out.println("Uploading process to be start...");  Even this output not print in my tomcat log.

       

      In my following code, i don't know what i mistake...

       

      Otherwise is any otherway to show the uploaded file name in modalpanel                        

       

      upload.jsp

       

       

       <body>
      
         <h:form id="UploadForm" binding="#{FileUpload.intiForm}">
      
               <a4j:outputPanel id="uploadOutputPanel">
      
               <a4j:commandButton value="ShowModalPanel" 
                                action="#{FileUpload.showUploadPanelAction}"
                                oncomplete="#{rich:component('uploadImagePanel')}.show()"
                                reRender="uploadImagePanel,uploadOutputPanel"/>
                     </a4j:outputPanel>
            </h:form>
      
          <rich:modalPanel id="uploadImagePanel" moveable="true" top="150" width="400" autosized="true">
      
               <h:form id="uploadForm" enctype="multipart/form-data" >
      
                       <h:panelGrid id="uploadPanelGridId" columns="2">
      
                             <t:inputFileUpload id="uploadFile"
                                              value="#{FileUpload.logoImageFile}"
                                              size="54"/>
      
                             <h:commandButton id="UploadButton" 
                                                 value="Upload"
                                                 action="#{FileUpload.uploadFileAction}"/>
      
                              <h:outputText value="Uploaded File Name : #{FileUpload.fileName}"/>
      
                       </h:panelGrid>
      
              </h:form>
      
         </rich:modalPanel>
      
        </body>
      

       

       

      FileUpload.java

       

       

      import javax.faces.component.html.HtmlForm;
      import org.apache.myfaces.custom.fileupload.UploadedFile;
      
      /**
       *
       * @author eswar
       */
      public class FileUpload
      {
          private HtmlForm intiForm;
          private String fileName;
          private UploadedFile logoImageFile;
      
          public String showUploadPanelAction()
          {
              System.out.println("Show Upload Panel Action ....."); //This line showing in tomcat log, when i click "ShowModalPanel" button --> a4j:commandButton
              return "";
          }
      
          public String uploadFileAction()
          {
              System.out.println("Uploading process to be start....");  //But this line NOT show in my tomcat log, when i click "UploadButton" --> h:commandButton
              System.out.println("logoImageFile : " + logoImageFile);
      
              if(logoImageFile != null)
              {
                  fileName = logoImageFile.getName();
              }
      
              return "";
          }
      
          public HtmlForm getIntiForm(){
              System.out.println("Page initializing......");  //This line showing in tomcat log, when the page loading time
              return intiForm;
          }
      
          public void setIntiForm(HtmlForm intiForm) {
              this.intiForm = intiForm;
          }
      
          public UploadedFile getLogoImageFile(){
              return logoImageFile;
          }
      
          public void setLogoImageFile(UploadedFile logoImageFile){
              this.logoImageFile = logoImageFile;
          }
      
          public String getFileName(){
              return fileName;
          }
      
          public void setFileName(String fileName) {
              this.fileName = fileName;
          }
      
      }
      

       

       

      Please help me.

      Thanks in advance.

        • 1. Re: h:commandButton not worked in modalPanel
          mp911de

          Hi Jack,

          all clickable controls of h:... perform a page submit. The missing call to your bean's method is some kind of strange (does this bean work ingeneral?). Please use the a4j:commandButton to avoid the page submit. You can use the oncomplete-JS-Method to close or postprocess your modal panel.

          Best regards,

          Mark

          • 2. Re: h:commandButton not worked in modalPanel
            jackrobert1985

            Thanks for you reply...

             

            But, when i am using a4j:commandButton, i can get logoImageFile :  null value.

             


            public String uploadFileAction()
            {
                    System.out.println("Uploading process to be start....");
                    System.out.println("logoImageFile : " + logoImageFile);     //Here i get null value
            
                    if(logoImageFile != null)
                    {
                        fileName = logoImageFile.getName();
                    }
            
                    return "";
             }
            

             

             

             

            <rich:modalPanel id="uploadImagePanel" moveable="true" top="150" width="400" autosized="true"> 
            
            <h:form id="uploadForm" enctype="multipart/form-data" >
            
                 <a4j:outputPanel id="uploadOutputPanel">
            
                        <h:panelGrid id="uploadPanelGridId" columns="2">
            
                               <t:inputFileUpload id="uploadFile"
                                          value="#{FileUpload.logoImageFile}"
                                          size="54"/>
            
                               <a4j:commandButton id="UploadButton" 
                                                    value="Upload"
                                                    action="#{FileUpload.uploadFileAction}"
                                                    reRender="uploadOutputPanel"/>
            
                               <h:outputText value="Uploaded File Name : #{FileUpload.fileName}"/>
            
                         </h:panelGrid>
               </a4j:outputPanel>
            
             </h:form>
            
            </rich:modalPanel>
            

             

            How to get uploadfile value in that in button action.

             

            Because, when i clik upload button, then i want to show the file name in modalPanel.

             

            Help me..

            Thanks in advance.

            • 3. Re: h:commandButton not worked in modalPanel
              mp911de

              Hi Jack,

              I just now noticed that you use Tomahawk for file upload. There is an other thread about ajax and fileupload with tomahawk (see http://community.jboss.org/message/38727) I don't know, whether tomahawk just don't work because you open your modalpanel by aj4 or by giving you the advice to use a4j to process upload. It would be perhaps a good idea to use rich:fileUpload. It's a bit more fancy than the simple "select file" widget but it works with RichFaces.

               

              Best regards,

              Mark

              • 4. Re: h:commandButton not worked in modalPanel
                jackrobert1985

                Thanks Mark Paluch for your response.

                 

                First i am trying rich:fileUpload component. But i got some exception while i am using rich:fileUpload. I can't resolve that error.

                 

                Thats why, now i am try to use t:inputFileUpload.

                 

                Is there any otherway to  upload file in my jsf application???

                 

                My previous post : http://community.jboss.org/message/615071#615071

                 

                Please help me.

                Thanks in advance.

                • 5. Re: h:commandButton not worked in modalPanel
                  mp911de

                  Hi Jack,

                  it seems that something got wrong within the Multipart-Request when you use rich:fileUpload. You generally do not need enctype=multipart/form-data, because rich:fileUpload goes ajax. Perhaps because of this the component does a NPE. Take a look at http://livedemo.exadel.com/richfaces-demo/richfaces/fileUpload.jsf?c=fileUpload

                   

                  PS: It's always good to put your h:form/a4j:form to the up-most level, perhaps even arround the rich:modalPanel and having one form ist better than two or more forms