1 2 Previous Next 24 Replies Latest reply on Mar 18, 2011 9:16 AM by ilya_shaikovsky

    Rich Modal Panel backing bean problems

    francescototti

      I have a richmodal panel.When I click on add, it does the action to addrow.However since i put reredner the table it doesnt submit the backing bean values the user enters.

      however if i  remove the rerender it will submit the whole page and the modal panel will close.

      how to get past this problem?         

       

       

       

        • 1. Re: Rich Modal Panel backing bean problems
          francescototti

           

          <rich:modalPanel  id="pn1">
          
          <rich:toolBar   >
                      <a4j:commandLink    ajaxSingle="true"  reRender="appTablet"   value="Add" action="#{events.addRow}" >
                      <a4j:support immediate="true" event="oncomplete" reRender="appTablet"/>
                      </a4j:commandLink>
          
          </rich:toolBar>
               <rich:dataTable  rows="0" id="appTablet"
                      var="item" value="#{events.eventList}" width="100%">
          
          
          
          
                      <rich:column>
                          <f:facet name="header">
                              <h:outputText styleClass="font"  value="Name" />
                          </f:facet>
                              <h:inputText autocomplete="true" styleClass="font"  id="itemNames" maxlength="239" value="#{item.name}" >
                          <a4j:support event="onchange"   action="#{events.ranges}" ajaxSingle="true" >
                          </a4j:support>
                      </h:inputText>
                          
                       
                      </rich:column>
          
          </rich:dataTable>
          
          
          • 2. Re: Rich Modal Panel backing bean problems
            ilya_shaikovsky

            1) Read about modal panel and forms in reference guide. (modal panel component section)

            2) remove support from link or you will get concurent requests fired.

            • 3. Re: Rich Modal Panel backing bean problems
              francescototti

              I have read that, http://docs.jboss.org/richfaces/latest_3_3_X/en/devguide/html/rich_modalPanel.html

              couldnt find much.                   

              • 5. Re: Rich Modal Panel backing bean problems
                francescototti
                <h:form>
                <rich:modalPanel  id="pn1">
                
                <rich:toolBar   >
                            <h:commandLink     value="Add" action="#{events.addRow}" >
                           
                            </h:commandLink>
                
                </rich:toolBar>
                     <rich:dataTable  rows="0" id="appTablet"
                            var="item" value="#{events.eventList}" width="100%">
                
                
                
                
                            <rich:column>
                                <f:facet name="header">
                                    <h:outputText styleClass="font"  value="Name" />
                                </f:facet>
                                    <h:inputText autocomplete="true" styleClass="font"  id="itemNames" maxlength="239" value="#{item.name}" >
                                <a4j:support event="onchange"   action="#{events.ranges}" ajaxSingle="true" >
                                </a4j:support>
                            </h:inputText>
                                
                             
                            </rich:column>
                
                </rich:dataTable>
                
                ..
                ..
                ..
                ..
                </h:form>
                
                
                
                

                 

                 

                 

                 

                 

                 

                
                <h:form>
                <rich:modalPanel  id="pn1">
                
                <rich:toolBar   >
                            <a4j:commandLink reRender="appTablet" ajaxSingle="true"     value="Add" action="#{events.addRow}" >
                           
                            </a4j:commandLink>
                
                </rich:toolBar>
                     <rich:dataTable  rows="0" id="appTablet"
                            var="item" value="#{events.eventList}" width="100%">
                
                
                
                
                            <rich:column>
                                <f:facet name="header">
                                    <h:outputText styleClass="font"  value="Name" />
                                </f:facet>
                                    <h:inputText autocomplete="true" styleClass="font"  id="itemNames" maxlength="239" value="#{item.name}" >
                                <a4j:support event="onchange"   action="#{events.ranges}" ajaxSingle="true" >
                                </a4j:support>
                            </h:inputText>
                                
                             
                            </rich:column>
                
                </rich:dataTable>
                
                ..
                ..
                ..
                ..
                </h:form>
                
                
                
                

                 

                 

                 

                 

                whatever i do i dont get it worked. i tried using dom thing as well and it didnt work.

                 

                if i do first case, it submits the whole page and closes the modal dialog.

                if i do the second, it rerenders the table with id apptablet..but doesnt sets the backing bean values entered insie the table             

                • 6. Re: Rich Modal Panel backing bean problems
                  liuliu

                  hi,

                   

                  he means you should put your form inside the modalpanel.

                  • 7. Re: Rich Modal Panel backing bean problems
                    francescototti

                    same outcome man.         

                    • 8. Re: Rich Modal Panel backing bean problems
                      francescototti
                      <!doctype html public "-//w3c//dtd html 4.0 transitional//en">
                      <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
                      <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
                      <!-- RichFaces tag library declaration -->
                      <%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
                      <%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>
                      
                      
                      
                      
                      <html>
                      
                      
                      
                      
                         
                      <body onload="init()">
                      </body>
                      <f:view>
                      
                      
                           <a4j:keepAlive  beanName="events" ajaxOnly="true"/>
                           
                      <h:form id="zForm">
                      <h:inputHidden id="message" value="#{events.message}" ></h:inputHidden>
                      <rich:toolBar >
                        <a4j:commandLink  action="#{events.addForm}" ajaxSingle="true" reRender="panel"  onclick="Richfaces.showModalPanel('pn1',{width:620, height:420, top:50})"    value="Add">
                            
                          </a4j:commandLink>
                         
                      <h:commandLink  id="ADDNew" value="Add" onclick="return openDialog(this,'Add Events','','globalevents',835,410)" /> 
                      <h:commandLink  onclick="return validDelete('confirmBox')" value="Delete" action="#{events.delete}" ></h:commandLink>
                      </rich:toolBar>
                      
                      
                      <rich:simpleTogglePanel switchType="ajax" label="Global Events">
                      <rich:dataTable     rows="#{common.rowNum}"   value="#{events.listOfEvents}"
                      var="record" id="appTable" reRender="sc1"
                      onRowMouseOver="this.style.backgroundColor='#B5F3FB'" width="100%"
                      onRowMouseOut="this.style.backgroundColor='#{a4jSkin.rowBackgroundColor}'">
                      
                      
                      
                                       <rich:column style="text-align:center;">
                                       <f:facet name="header">
                                               <h:selectBooleanCheckbox   value="#{events.selectAll}"    onclick="selectAll(this.checked)"></h:selectBooleanCheckbox>
                                          </f:facet>
                                         
                                           <h:selectBooleanCheckbox   styleClass="select"   onclick="return selectShift(this,event)" valueChangeListener="#{events.selectAllRowsChanged}" value="#{record.deleteRow}"   id="tableSelectOne1" >             
                                          <a4j:support event="onclick" />
                                           </h:selectBooleanCheckbox>
                                          </rich:column>
                                          <rich:column>
                                            <f:facet name="header">
                                              <h:outputText styleClass="headerText" value="Name" />
                                              </f:facet>
                                                   <h:outputText value="#{record.name}" /> 
                                                   <h:inputHidden id="itemId" value="#{record.id}" />  
                                          </rich:column>
                                          <rich:column>
                                          <f:facet name="header">
                                              <h:outputText styleClass="headerText" value="Status" />
                                             </f:facet>
                                                    <h:outputText value="#{record.stat}" />  
                                          </rich:column>
                                          <rich:column>
                                               <f:facet name="header">
                                              <h:outputText styleClass="headerText" value="Notification Date" />
                                              </f:facet>
                                               <h:outputText value="#{record.dateToUse}" />
                                          </rich:column>
                                          <rich:column>
                                          <f:facet name="header">
                                              <h:outputText styleClass="headerText" value="Event Date" />
                                         </f:facet>
                                                     <h:outputText value="#{record.occuredOnDate}" />  
                                          </rich:column>
                                           <rich:column>
                                           <f:facet name="header">
                                              <h:outputText styleClass="headerText"  />
                                              </f:facet>
                                                        <h:commandLink id="edit" onclick="return openDialog(this,'Edit Events Form','','globalevents',1000,420)" value="edit"  ></h:commandLink>
                                          </rich:column>
                      
                      
                                        <rich:column>
                                                    <f:facet name="header">
                                              <h:outputText styleClass="headerText"  />
                                              </f:facet>
                                      <h:commandLink styleClass="font"  id="showDeal" value="Show Deals" 
                                          onclick="return openDialog(this,'Deals','','globalevents',765,420)" />
                                  </rich:column>
                                  
                             
                                      </rich:dataTable>
                               <rich:datascroller onclick="return submit()" maxPages="10" id="sc1"   align="left" for="appTable"  page="#{events.pageFlip}" >
                         
                               </rich:datascroller>
                                </rich:simpleTogglePanel>
                                <h:commandLink id="yes"    >
                                </h:commandLink>
                                     
                      </h:form>
                      
                      
                      <rich:modalPanel domElementAttachment="form"  id="pn1">
                      <f:facet name="header">
                      <h:outputText value="Events" />
                      </f:facet>
                      <f:facet name="controls">
                      <h:panelGroup>
                      <h:graphicImage value="../../skins/mycompany/skin_images/close.gif" id="hidelinkId"
                      styleClass="hidelink" />
                      <rich:componentControl for="pn1" attachTo="hidelinkId"
                      operation="hide" event="onclick" />
                      </h:panelGroup>
                      </f:facet>
                      
                      
                           <a4j:commandLink id="yes4" ajaxSingle="true"  reRender="appTablet"   >
                                </a4j:commandLink>
                                
                      <a4j:commandLink id="yes2" ajaxSingle="true" reRender="appTablet"    action="#{events.insert}" />
                      <a4j:form  id="bform">    
                          <h:panelGrid id="panel">
                          
                      
                      
                      <rich:toolBar   >
                      
                      
                                  <h:commandLink  value="Add" action="#{events.addRow}" >
                                  </h:commandLink>
                                  <a4j:commandLink ajaxSingle="true"  reRender="appTablet"   value="Delete" action="#{events.deleteRow}" >
                                  <a4j:support event="oncomplete" reRender="appTablet"/>
                                  </a4j:commandLink>
                          
                              </rich:toolBar>
                          
                          
                              <rich:spacer height="18" ></rich:spacer>
                              <rich:dataTable  rows="0" id="appTablet"
                                  var="item" value="#{events.eventList}" width="100%">
                      
                      
                                  <rich:column style="text-align:center;" rendered="#{events.formType}" >
                                      <f:facet name="header">
                                          <h:selectBooleanCheckbox valueChangeListener="#{events.range}" value="#{events.selectAllF}" onclick="selectAllF(this.checked)" id="check" />
                                      </f:facet>
                                      
                                      <h:selectBooleanCheckbox onclick="return selectShift(this,event)"
                                          value="#{item.deleteRow}"  valueChangeListener="#{events.range}" id="tableSelectOne1" />
                                  </rich:column>
                      
                      
                      
                      
                                  <rich:column>
                                      <f:facet name="header">
                                          <h:outputText styleClass="font"  value="Name" />
                                      </f:facet>
                                          <h:inputText styleClass="font" valueChangeListener="#{events.range}" id="itemNames" maxlength="239" value="#{item.name}" >
                                      <a4j:support event="onchange"  action="#{events.ranges}" ajaxSingle="true" />
                                  </h:inputText>
                                      
                                   
                                  </rich:column>
                                  <rich:column>
                      
                      
                                  </rich:column>
                                  <rich:column>
                                  <f:facet name="header">
                                          <h:outputText   value="Name" />
                                      </f:facet>
                                      <h:selectOneMenu  id="statscodes" onchange="return disab(this.value,this.id)" disabled="#{events.occurred}"   value="#{item.statusCode}" >
                      <f:selectItems value="#{events.eventItems}" />
                      </h:selectOneMenu>
                                      
                                   
                                  </rich:column>
                                  <rich:column >
                                      <f:facet name="header">
                                          <h:outputText styleClass="font"  value="Notification Date" />
                                      </f:facet>
                      
                      
                      
                                       <rich:calendar rendered="#{item.disable}" id="dateusesd"  onchanged="checkTimes(this.value,this.id)" datePattern="dd-MMM-yyyy"    value="#{item.dateUsed}" cellWidth="24px" cellHeight="22px" style="width:200px"/>
                                  </rich:column>
                                  <rich:column>
                      
                      
                                      
                      
                      
                                           <rich:calendar   rendered="#{!item.disable}" id="occurred" onchanged="checkTime(this.value,this.id)"datePattern="dd-MMM-yyyy"    value="#{item.occurredDate}" cellWidth="24px" cellHeight="22px" style="width:200px"/>
                                  </rich:column>
                      
                      
                      
                      
                      
                      
                              </rich:dataTable>
                              <h:inputHidden id="inValidForm" value="#{events.inputText}" />
                              <h:inputHidden id="isDeleteRow" value="#{events.numRowsDeleted}" />
                          
                              </h:panelGrid>
                      </a4j:form>    
                                  <a4j:commandButton reRender="appTablet"  onclick="if(!saveAndClose(true)) return false;"
                                      value="Save And Close" action="#{events.insert}" >
                                      <a4j:support  event="onclick" />
                                      </a4j:commandButton>
                      
                      
                          
                          
                      
                      
                      
                      </rich:modalPanel>
                      
                      
                      </f:view>
                      
                      
                      </html>

                       

                       

                       

                      when i click on the button in big letter the modal panel will close.

                      • 9. Re: Rich Modal Panel backing bean problems
                        liuliu

                        in your last code pasted, Did you try remove docAttachement, and put your commandbutton in the form of modal panel?

                         

                        and try make events session scope if it is request scope.

                        • 10. Re: Rich Modal Panel backing bean problems
                          francescototti

                          yes same outcome    

                          • 11. Re: Rich Modal Panel backing bean problems
                            francescototti

                            I made the code simpler. yet same problem.

                             

                             

                            <!doctype html public "-//w3c//dtd html 4.0 transitional//en">
                            <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
                            <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
                            <!-- RichFaces tag library declaration -->
                            <%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
                            <%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>
                            
                            
                            
                            <html>
                            <head>
                            <style type="text/css">
                             .dr-mpnl-pnl {overflow:auto!important}
                            </style>
                            
                              
                                        <title>Global Events</title>
                            
                                  </head>
                               
                            <body>
                            </body>
                            <f:view>
                            
                                 <a4j:keepAlive  beanName="events" ajaxOnly="true"/>
                                 
                            <h:form id="zForm">
                            <rich:toolBar >
                              <a4j:commandLink  action="#{events.addForm}"   onclick="Richfaces.showModalPanel('pn1',{width:620, height:420, top:50})"    value="Add">
                                  
                                </a4j:commandLink>
                              
                            </rich:toolBar>
                            
                                           
                            </h:form>
                            
                            <rich:modalPanel  id="pn1">
                            
                            
                            
                            <h:form  id="bform">    
                            
                            
                                        <h:commandLink  value="Add" action="#{events.addRow}" >
                                        </h:commandLink>
                            
                            
                                    <rich:dataTable  rows="0" id="appTablet"
                                        var="item" value="#{events.eventList}" width="100%">
                            
                            
                            
                            
                            
                                        <rich:column>
                                            <f:facet name="header">
                                                <h:outputText styleClass="font"  value="Name" />
                                            </f:facet>
                                                <h:inputText styleClass="font"  id="itemNames" maxlength="239" value="#{item.name}" >
                                   
                                        </h:inputText>
                                            
                                         
                                        </rich:column>
                            
                            
                            
                            
                            
                                    </rich:dataTable>
                            </h:form>    
                            
                            
                            
                            
                                
                                
                            
                            
                            </rich:modalPanel>
                            
                            </f:view>
                            
                            </html>
                            
                            

                             

                             

                            the scope is session.

                            • 12. Re: Rich Modal Panel backing bean problems
                              liuliu

                              why your command link addForm does not rerender bform? and remove keepalive too.

                              • 13. Re: Rich Modal Panel backing bean problems
                                francescototti

                                there u go...same problem

                                 

                                 

                                 

                                 

                                <!doctype html public "-//w3c//dtd html 4.0 transitional//en">
                                <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
                                <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
                                <!-- RichFaces tag library declaration -->
                                <%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
                                <%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>
                                
                                
                                
                                <html>
                                <head>
                                <style type="text/css">
                                 .dr-mpnl-pnl {overflow:auto!important}
                                </style>
                                
                                  
                                            <title>Global Events</title>
                                
                                      </head>
                                   
                                <body>
                                </body>
                                <f:view>
                                     
                                <h:form id="zForm">
                                <rich:toolBar >
                                  <a4j:commandLink reRender="bForm" ajaxSingle="true"  action="#{events.addForm}"   onclick="Richfaces.showModalPanel('pn1',{width:620, height:420, top:50})"    value="Add">
                                      
                                    </a4j:commandLink>
                                  
                                </rich:toolBar>
                                
                                     </h:form>          
                                
                                <rich:modalPanel  id="pn1">
                                
                                <h:form  id="bform">    
                                
                                
                                            <h:commandLink  value="Add" action="#{events.addRow}" >
                                            </h:commandLink>
                                
                                
                                        <rich:dataTable  rows="0" id="appTablet"
                                            var="item" value="#{events.eventList}" width="100%">
                                
                                            <rich:column>
                                                <f:facet name="header">
                                                    <h:outputText styleClass="font"  value="Name" />
                                                </f:facet>
                                                    <h:inputText styleClass="font"  id="itemNames" maxlength="239" value="#{item.name}" >
                                       
                                            </h:inputText>
                                                       
                                            </rich:column>
                                
                                        </rich:dataTable>
                                </h:form>    
                                
                                </rich:modalPanel>
                                
                                </f:view>
                                
                                </html>
                                
                                • 14. Re: Rich Modal Panel backing bean problems
                                  nbelaevski

                                  Hi,

                                   

                                  So, when you click this buttton:

                                   

                                              <h:commandLink  value="Add" action="#{events.addRow}" >
                                              </h:commandLink>

                                  Data is not being updated in model, right?
                                  1 2 Previous Next