2 Replies Latest reply on Feb 16, 2009 3:54 PM by Roland Schöler

    h:panelgrid rerendering doesn't work with ModalPanel

    Roland Schöler Newbie

      Hi folks, today I've started to work a little bit more with AJAX-functionality and I'm very impressed from the out-of-the-box usage....wow....really good work.
      Nevertheless the currently available pdf-doc is not so clear for me - therefore my code could contains useless staff. I've searched the issue-tracking but not found related topic.

      Following "bug":
      After coming back from the ModalPanel id="newKeyPanel" no rendering of a4j:region id="button_region_all" resp. h:panelGrid id="buttons_all" will be done. Although the assumption rendered="#{mappingHandler.selectedIdentifier != null}" is satisfied
      The rest of the page is rendered or rerendered correctly
      Naturally I've tried other ways of rerendering e.g. take h:panelgrid id etc.
      Maybe someone can find the error in my code - I've no more ideas...

      My steps:
      1. Click on a4j:commandLink with id="newKeyLink" -> opens ModalPanel
      2. Insert name for new key
      3. Click Button store -> allIdentifiers were updated
      4. Rerendering is all done according to reRender="id_combo,list_of_mappings,button_region_all", except id=button_region_all

      By the way the ModalPanel src is taken from rich:datatable-demo....very good work...... 8-}

      My Environment:
      - jdk1.6.0_11
      - RF 3.3.0 GA
      - MyFace 1.2.5
      - Apache Tomcat/6.0.16 (Standalone)

      <div id="workplace">
      
       <!-- Region for whole AJAX-Side -->
       <a4j:region id="outside" renderRegionOnly="true">
      
       <a4j:region id="combo_region">
       <h:panelGrid id="id_combo" columns="6" styleClass="standardTableBordered">
       <h:outputLabel value="#{msgs.mapping_identifier_label}: " for="idList" />
       <rich:comboBox id="idList" value="#{mappingHandler.selectedIdentifier}" suggestionValues="#{mappingHandler.allIdentifiers}"
       directInputSuggestions="true" defaultLabel="#{msgs.mapping_combo_default}">
       <a4j:support event="onselect" reRender="list_of_mappings,buttons_all" ajaxSingle="true" limitToList="true"/>
       </rich:comboBox>
       <rich:spacer width="100" height="10" title="Here is a spacer..."/>
       <a4j:commandLink ajaxSingle="true"id="newKeyLink"
       oncomplete="#{rich:component('newKeyPanel')}.show()">
       <h:graphicImage value="/images/edit.gif" style="border:0"/>
       </a4j:commandLink>
       <rich:toolTip for="newKeyLink" value="#{msg.tooltip_create_new_mappingkey}"/>
       <rich:message for="idList" />
       </h:panelGrid>
       </a4j:region> <!-- id is combo_region-->
      
       <br/>
      
       <a4j:region id="table_region">
       <rich:dataTable id="list_of_mappings" rows="10"
       onRowMouseOver="this.style.backgroundColor='#F1F1F1'"
       onRowMouseOut="this.style.backgroundColor='#{a4jSkin.tableBackgroundColor}'"
       cellpadding="0" cellspacing="0"
       width="1000" border="0" var="record" value="#{mappingHandler.result}">
       ...
       <rich:column>
       <f:facet name="header">
       <h:outputText value="#{msgs.mapping_actions}" />
       </f:facet>
       <a4j:commandLink id="deletelink" action="#{mappingHandler.deleteMapping}" reRender="list_of_mappings"
       onclick="if(!confirm('#{msgs.js_delete_mapping}')){return false;};" ajaxSingle="true">
       <h:graphicImage value="/images/delete.gif" style="border:0"/>
       <f:setPropertyActionListener value="#{record.oid}" target="#{mappingHandler.oidForDeletion}" />
       </a4j:commandLink>
       <rich:toolTip for="deletelink" value="#{msgs.tooltip_delete_mapping}"/>
       </rich:column>
       </rich:dataTable>
       </a4j:region> <!-- id is table_region-->
      
       <br/>
      
       <a4j:region id="button_region_all" selfRendered="true">
      <h:panelGrid id="buttons_all" columns="2" styleClass="standardTableBordered" rendered="#{mappingHandler.selectedIdentifier != null}">
       <a4j:commandButton value="#{msgs.button_label_new_mapping}" onclick="this.disabled=true;" action="#{mappingHandler.createNewMapping}"
       reRender="list_of_mappings,buttons_all" />
       <h:commandButton value="#{msgs.button_label_save}" action="#{mappingHandler.save}" />
       </h:panelGrid>
       </a4j:region>
      
       </a4j:region> <!-- id is outside -->
      </div>
      <!-- END CONTAINER -->
      
      </h:form>
      
      <!-- Modal Panel to insertion of new key-->
      <rich:modalPanel id="newKeyPanel" autosized="true" width="450">
       <f:facet name="header">
       <h:outputText value="#{msgs.modal_new_key_header}" />
       </f:facet>
       <f:facet name="controls">
       <h:panelGroup>
       <h:graphicImage value="/images/close.png"
       id="hidelink" styleClass="hidelink"/>
       <rich:componentControl for="newKeyPanel" attachTo="hidelink"
       operation="hide" event="onclick" />
       </h:panelGroup>
       </f:facet>
       <h:form>
       <rich:messages style="color:red;"></rich:messages>
       <h:panelGrid columns="1">
       <a4j:outputPanel ajaxRendered="true">
       <h:panelGrid columns="2">
       <h:outputText value="#{msgs.modal_new_key_name}: "/>
       <h:inputText value="#{mappingHandler.newIdentifier}" />
       </h:panelGrid>
       </a4j:outputPanel>
       <a4j:commandButton value="Store"
       action="#{mappingHandler.createNewKey}"
       reRender="id_combo,list_of_mappings,button_region_all"
       oncomplete="if(#{facesContext.maximumSeverity==null}) #{rich:component('newKeyPanel')}.hide();" />
       </h:panelGrid>
       </h:form>
      </rich:modalPanel>
      


      public class MappingHandler{
       private List<String> allIdentifiers;
      
       private String selectedIdentifier;
      
       //name of new created identifier
       private String newIdentifier;
      
       //the query-result
       public List<GenericMapping> result;
      
       public List<GenericMapping> getResult() {
      
       //case 1: no result exists and nothing selected
       if(this.result == null && this.selectedIdentifier == null) {
       result = new ArrayList<GenericMapping>();
       }
      
       if(this.result == null && this.selectedIdentifier != null){
       //case 2: no result exists, but something is selected
       result = new GenericMappingDAO().listAll(this.selectedIdentifier);
       }
      
       return this.result;
       }
      
      
       public void createNewKey(){
       log.info("Save new identifier: " + this.newIdentifier);
       this.allIdentifiers.add(this.newIdentifier);
       this.selectedIdentifier = this.newIdentifier;
       this.result = new ArrayList<GenericMapping>();
       this.newIdentifier = null;
       }
      ...
      }
      


      regards
      roland

        • 1. Re: h:panelgrid rerendering doesn't work with ModalPanel
          Nick Belaevski Master

          Hello Roland,

          Region itself is not rendered to the client. Please take a look at a4j:outputPanel documentation, there's a special 'none' layout allowing to update non-rendered elements.

          • 2. Re: h:panelgrid rerendering doesn't work with ModalPanel
            Roland Schöler Newbie

            Hi Nick, you're really good at your work. That was the point, and everything works as expected. Thanks for your tip 8-}

            For the sake of completeness - this is my changed code from above - only surrounding of h:panelGrid with a4j:outputPanel and all rerendering-links are directed to id=button_placeholder.

            <a4j:region id="button_region_all">
             <a4j:outputPanel id="button_placeholder" layout="none">
             <h:panelGrid id="buttons_all" columns="2" styleClass="standardTableBordered" rendered="#{mappingHandler.selectedIdentifier != null}">
             <a4j:commandButton value="#{msgs.button_label_new_mapping}" onclick="this.disabled=true;" action="#{mappingHandler.createNewMapping}"
             reRender="list_of_mappings,buttons_all" />
             <h:commandButton value="#{msgs.button_label_save}" action="#{mappingHandler.save}" />
             </h:panelGrid>
             </a4j:outputPanel>


            Description of this behaviour can be found at the AJAX-documentation at point 5.5.1 Rerendering at page 28 (Chapter 5 Basic Concepts of) - search for
            a4j:outputPanel
            and you will find it faster.....8-}

            Regards
            roland