command button not invoking action on multiple tabs p:tabView

Question

I am facing a problem in p:tabView with dynamic="true" which i am stuck in for days. I have three tabs each having separate form and p:fileUpload with command button for submitting the form and upload file. The problem is my first form or tab works fine but the other two are not working or firing command button action at all, instead ti refreshes the page. They are invoked only when second time form filled and button pressed. And to add one thing more the fileUploadListeners even work fine in all these tabs but the command button wont work or fire action method for other two tabs(only the first time form filled and submitted after that works fine):

Is there something wrong with this primefaces tag(i m using latest version of primefaces 3.5 also) or i am mistaking or missing something?? any kind of guidance will be helpful.

Here is the page code which is included in another main page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  

<ui:composition xmlns="http://www.w3.org/1999/xhtml"  
   xmlns:ui="http://java.sun.com/jsf/facelets"  
   xmlns:h="http://java.sun.com/jsf/html"  
   xmlns:f="http://java.sun.com/jsf/core"  
   xmlns:p="http://primefaces.org/ui"  
   template="/MasterPage/Master.xhtml">  

   <ui:define name="Search">  

      <div class="searchBarDiv"></div>  
      <br class="clear" />  

      <div class="resultMainDiv" style="background-color: white;">  
         <p:layout style="width:1218px;height:558px;" id="layout">  

            <p:ajax event="toggle" />  
            <p:layoutUnit position="west" size="300" header="UPDATES"  
               resizable="true" collapsible="true" styleClass="sliderDiv"  
               style="color:pink;">  
            </p:layoutUnit>  

         <p:layoutUnit position="center" styleClass="resultDiv">  
               <div class="uploadDiv">  

                    <p:tabView id="tabview" cache="false" dynamic="true">  
                       <p:tab id="docTab" title="Document">  
                         <h:form id="docf" >  

                          <h:panelGrid id="grid" columns="1">  

                                   <h:panelGroup>  

                                   <h:outputLabel styleClass="advLabel"  
                                       for="mId" value="Title ">  
                                    </h:outputLabel><h:outputLabel style="color: red;">*</h:outputLabel>  
                                 <h:inputText id="mId"  
                                       styleClass="txtfield"  
                                       value="#{documentInsertController.documentTitle}">  

                                    </h:inputText>  
                                   </h:panelGroup>  



                                   <h:panelGroup>  
                                   <h:outputLabel class="advLabel">Dated </h:outputLabel>  
                                 <p:calendar styleClass="txtfield" id="dtxtOrginated"  
                                       mode="popup" navigator="true" yearRange="1900:2015"  
                                       pattern="dd-MMM-yyyy"  
                                       converter="CalendarDateStringConverter"  
                                       value="#{documentInsertController.documentOriginatedOn}" />  

                                   </h:panelGroup>  

                                   <h:panelGroup>  
                                   <h:outputLabel class="advLabel">KeyWord</h:outputLabel><h:outputLabel  
                                    style="color: red;"> *</h:outputLabel>  
                                 <h:inputText id="dtxtKeywordsList"  
                                       value="#{documentInsertController.documentKeywords}"  
                                       styleClass="txtfield"  />  
                                   </h:panelGroup>  

                                      <h:panelGrid rendered="#{renderBean.viewLoad}">  
                                 <h:panelGroup> <h:outputLabel class="advLabel">Select Document</h:outputLabel><h:outputLabel  
                                    style="color: red;"> *</h:outputLabel>  
                                    <p:fileUpload  id="fu" allowTypes="/(\.|\/)(DOC|DOCX|doc|docx|ppt|xls|xlsx|pdf)$/"  
                                multiple="false" mode="advanced" sizeLimit="41949000" showButtons="false"  
                                 fileUploadListener="#{documentInsertController.uploadPListener}" label="Browse"   
                                 value="#{documentInsertController.file}"  >  
                                 <h:message id="docMSG" for="fu"></h:message>  
                                 </p:fileUpload>  

                                    </h:panelGroup>  

                                    <h:panelGroup>  
                                       <p:commandButton id="DocUpoadLoad" styleClass="btn"  
                                 value="Load File For Preview" ajax="false"  
                                 action="#{documentInsertController.loadDocForPreview}"  

                                 style="background-color:#FEAA41;background-image:none;color:white;font-weight:bold;width:170px; height:25px;">  

                              </p:commandButton>  
                                    </h:panelGroup>  
                                    </h:panelGrid>     

               </h:panelGrid>  
                  </h:form>  

                           <p:commandButton id="DocUploadbtn" value="Upload"  
                              action="#{documentInsertController.saveDocument}"  
                              ajax="false"  
                              style="background-color:#FEAA41;background-image:none;color:white;font-weight:bold; ">  

                           </p:commandButton>  

                        </h:panelGrid>        

                     </p:tab>  

                     <p:tab id="imgTab" title="Image">  

                        <h:form id="imagef" >  
                     <h:panelGrid id="grid" columns="1">  
                           <h:panelGroup> <h:outputLabel class="advLabel">Title </h:outputLabel> <h:outputLabel  
                                    style="color: red;"> *</h:outputLabel>  
                                 <h:inputText id="txtImgTitle"  
                                       value="#{mediaInsertController.mediaTitle}"  
                                       styleClass="txtfield" >  
                                    </h:inputText>  
                                     </h:panelGroup>  
                              <h:panelGroup> <h:outputLabel class="advLabel">Taken Date</h:outputLabel>  
                                 <p:calendar styleClass="txtfield"  
                                       id="imgtxtOrginated" mode="popup" navigator="true"  
                                       yearRange="1900:2015" pattern="dd-MMM-yyyy"  
                                       converter="CalendarDateStringConverter"  
                                       value="#{mediaInsertController.mediaTakenOn}" />  
                              </h:panelGroup>  

                              <h:panelGroup> <h:outputLabel class="advLabel">Description</h:outputLabel>  
                                   <h:inputTextarea id="txtImgDescription"  
                                       value="#{mediaInsertController.mediaDescription}"  
                                       styleClass="txtImgDescription" /></h:panelGroup>  

                              <h:panelGroup> <h:outputLabel class="advLabel">Select Image</h:outputLabel><h:outputLabel  
                                    style="color: red;"> *</h:outputLabel>  


                                 <p:fileUpload id="fuImage" allowTypes="/(\.|\/)(jpeg|jpg|png|bmp|gif|GIF|PNG)$/"  
                                multiple="false" mode="advanced" sizeLimit="6291456" showButtons="false"  
                                 label="Browse"   invalidSizeMessage="File exceeds limmit 6 MB "  
                                 value="#{mediaInsertController.file}" fileUploadListener="#{mediaInsertController.uploadPListener}"  />  
                                 <h:message id="imgMSG" for="fuImage"></h:message>  
                                    </h:panelGroup>  


                           <p:commandButton styleClass="btn" id="btnUploadImage_Click" ajax="false"  
                                             value="Upload"  actionListener="#{mediaInsertController.saveImage}"  
                                             style="background-color:#FEAA41;background-image:none;color:white;font-weight:bold; ">  

                              </p:commandButton>  

                           </h:panelGrid>  

                        </h:form>  

                     </p:tab>  

                     <p:tab id="vidTab" title="Video">  

                           <h:form id="videof" >  
                     <h:panelGrid   id="grid" columns="1">  
                                 <h:panelGroup>  
                                 <h:outputLabel class="advLabel">Title </h:outputLabel> <h:outputLabel  
                                    style="color: red;"> *</h:outputLabel>  
                                 <h:inputText id="vtxtTitle"  
                                       value="#{mediaInsertController.mediaTitle}"  
                                       styleClass="txtfield" maxlength="50" >  
                                    </h:inputText></h:panelGroup>  

                              <h:panelGroup> <h:outputLabel class="advLabel">Taken Date</h:outputLabel>  
                                 <p:calendar styleClass="txtfield" id="vtxtOrginated"  
                                       mode="popup" navigator="true" yearRange="1900:2015"  
                                       pattern="dd-MMM-yyyy"  
                                       converter="CalendarDateStringConverter"  
                                       value="#{mediaInsertController.mediaTakenOn}" />  
                              </h:panelGroup>  

                              <h:panelGroup> <h:outputLabel for="txtVidDescription"  
                                       value="Description" styleClass="advLabel"></h:outputLabel>  

                                   <h:inputTextarea id="txtVidDescription"  
                                       value="#{mediaInsertController.mediaDescription}"  
                                       styleClass="txtUploading" style="height:40px" />  
                              </h:panelGroup>  
                              <h:panelGroup> <h:outputLabel class="advLabel">Select Video</h:outputLabel><h:outputLabel  
                                    style="color: red;"> *</h:outputLabel>  

                                 <p:fileUpload id="fuVideo" allowTypes="/(\.|\/)(mp4|flv|swf)$/" invalidFileMessage="Invalid file content"  
                                multiple="false" mode="advanced" sizeLimit="629145699" showButtons="false" update="vidMSG"  
                                 fileUploadListener="#{mediaInsertController.uploadPListener}" label="Browse" invalidSizeMessage="Size exeeds limit 600MB"  
                                 value="#{mediaInsertController.file}" />  
                              <h:message id="vidMSG" for="fuVideo"></h:message>  


                                 </h:panelGroup>  




                           <p:commandButton styleClass="btn" id="btnUploadVideo_Click" ajax="false"  
                              value="Upload" action="#{mediaInsertController.saveVideo}"  
                              style="background-color:#FEAA41;background-image:none;color:white;font-weight:bold; ">  

                           </p:commandButton>  

                           </h:panelGrid>                             


                        </h:form>  

                     </p:tab>  


                    </p:tabView>  

               </div>  

            </p:layoutUnit>  
         </p:layout>  

         <p:growl autoUpdate="true" sticky="true" id="uploadMSG"></p:growl>  

      </div>  
   </ui:define>  
</ui:composition>

score 1 · Answer 1 · edited Feb 11 '13 at 13:25

1

Your commandButton id="DocUploadbtn" is outside the h:form, that could be affecting things. There also seem to be three closing h:panelGrid tags around the same area; could it be malformed XHTML?

edited Feb 11 '13 at 13:25

partlov

13,789
6
63
82

answered Feb 11 '13 at 13:20

Trish Rempel

543
3
8

even inside form same problem. image and video tab button not invoking any action – Zay hf Feb 12 '13 at 04:25
i removed the p:tab view completely and all the tabs of upload just to check if command button works eith these multiple forms but even without p:tabView this same problem is occuring. there is somthing else wrong in the page i am missing or not seeing – Zay hf Feb 12 '13 at 04:27
It's hard to say, there's a lot of nested XHTML that is hard to wade through; it could be a problem with the mediaInsertController backing bean. I would suggest splitting your code into separate include files and narrow down the problem that way. – Trish Rempel Feb 12 '13 at 14:41
1

@Zayhf have you tried to make form in this same composition and then find its working? I suggest you to not use any thing like global form – Freak Feb 25 '13 at 07:27
@freak that was the main issue. Thanks for pointing that out:) – Zay hf Mar 06 '13 at 08:31

command button not invoking action on multiple tabs p:tabView

1 Answers1