3 Replies Latest reply on Nov 6, 2008 10:55 AM by pbaker01

    ExtendedDataTable always reRendered on a4j:commandLink

    pbaker01

      I am using an extendedDataTable.
      Two of the columns are formatted with a4j:commandLinks.
      When selected a modalPanal is displayed and the user can enter/update some text.

      I have two problems:
      1) The extendedDataTable is reRendered before the modalPanel is displayed and I don't want this.
      2) The following text is displayed at the botton the rich:panel that contains the ExtendedDataTable:
      javascript:Richfaces.showModalPanel('reasonModal');

      See: [URL=http://picbite.com/image/6795yxpba/][IMG]http://img.picbite.com/2008/11/06/14837yxpba.jpg[/IMG][/URL]

      [img]http://img.picbite.com/2008/11/06/14836yxpba.png[/img]

      The sequence is:
      1) User Selects Link in ExtendedDataTable
      2) ActionListener is invoked via ajax to set selected item
      3) The modalPanel is reRendered
      4) ModalPanel is "shown"
      5) User Enters text
      6) User Submits text
      7) ActionListener is invoked via ajax to update text
      8) ModalPanel is "hidden"
      9) ExtendedDataTabke is reRendered

      Question:
      How do I prevent the ExtendedDataTable from being reRendered before the modalPanel is displayed? While it does not affect the functionality, the "user experience" is not smooth...

      Why is javascript function call being displayed as text in the rich:panel?

      PB


      Files - Page file:

      <html xmlns="http://www.w3.org/1999/xhtml"
       xmlns:ui="http://java.sun.com/jsf/facelets"
       xmlns:h="http://java.sun.com/jsf/html"
       xmlns:rich="http://richfaces.ajax4jsf.org/rich"
       xmlns:c="http://java.sun.com/jstl/core"
       xmlns:f="http://java.sun.com/jsf/core" xml:lang="en" lang="en">
      
       <ui:composition template="#{ahm565State.layout}">
      
       <ui:define name="header">
       <ui:include src="/topMenuBar.xhtml" />
       </ui:define>
      
       <ui:define name="menu">
       <ui:include src="/leftMenu.xhtml" />
       </ui:define>
      
       <ui:define name="content">
       <ui:include src="/content.xhtml" />
       </ui:define>
      
       </ui:composition>
      </html>


      content.xhtml

      <html xmlns="http://www.w3.org/1999/xhtml"
       xmlns:ui="http://java.sun.com/jsf/facelets"
       xmlns:h="http://java.sun.com/jsf/html"
       xmlns:rich="http://richfaces.ajax4jsf.org/rich"
       xmlns:a4j="http://richfaces.org/a4j"
       xmlns:c="http://java.sun.com/jstl/core"
       xmlns:f="http://java.sun.com/jsf/core" xml:lang="en" lang="en">
      
       <rich:panel id="contentPage">
      ...
       <c:if test="#{ahm565State.selectionPage == 'alnRevisionsPage'}">
       <a4j:include viewId="/contentPage/alnRevisionsPage.xhtml" />
       </c:if>
      ...
       </rich:panel>
      </html>


      alnRevisionsPage.xhtml

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      
      <html xmlns="http://www.w3.org/1999/xhtml"
       xmlns:ui="http://java.sun.com/jsf/facelets"
       xmlns:h="http://java.sun.com/jsf/html"
       xmlns:rich="http://richfaces.ajax4jsf.org/rich"
       xmlns:a4j="http://richfaces.org/a4j"
       xmlns:c="http://java.sun.com/jstl/core"
       xmlns:f="http://java.sun.com/jsf/core" xml:lang="en" lang="en">
      
       <body>
       <center>
       <h:outputLabel value="List of Revisions" styleClass="TitleNormal" />
       </center>
      
       <ui:include src="/messages.xhtml" />
      
       <a4j:keepAlive beanName="docRevisionController" />
      
       <a4j:form id="revisionForm">
       <center>
       <h:panelGrid columns="1">
       <h:panelGroup>
       <rich:spacer height="5" />
       <rich:extendedDataTable id="revision"
       value="#{docRevisionController.value}" var="item" rowKeyVar="idx"
       selectionMode="single" width="740px" height="450px"
       cellpadding="0" cellspacing="0">
       ...
       <rich:column id="reason" width="70px" label="Reason">
       <f:facet name="header">
       <h:outputText value="Reason" />
       </f:facet>
       ------>>>> <a4j:commandLink id="updReason" reRender="reasonModal"
       actionListener="#{docRevisionController.showReason}"
       oncomplete="javascript:Richfaces.showModalPanel('reasonModal');">
       <f:param name="docId" value="#{item.id}"></f:param>
       <h:outputText value="Update" />
       <rich:toolTip styleClass="ToolTipSty"
       disabled="#{item.reasonToolTipDisabled}">
       <h:outputText value="#{item.reasonFormatted}" escape="false" />
       </rich:toolTip>
       </a4j:commandLink>
       </rich:column>
      
       ...
       </rich:extendedDataTable>
       <h:panelGrid columns="1" width="740px" style="text-align: right">
       <h:panelGrid columns="3"
       columnClasses="CtaLw50P, CtaRw50P,CtaLw50P" width="740px">
       <h:commandButton id="delete" value="Delete Selected"
       action="#{docRevisionController.deleteSelected}"
       styleClass="BtnSmall" />
       <h:outputText value="Blank Lines:" styleClass="LblNormal" />
       <rich:inputNumberSpinner inputSize="2" enableManualInput="false"
       value="#{docRevisionController.blankLines}">
       <a4j:support requestDelay="500" ignoreDupResponses="true"
       actionListener="#{docRevisionController.updBlankLines}"
       event="onchange" reRender="revision" />
       </rich:inputNumberSpinner>
       </h:panelGrid>
       </h:panelGrid>
       <rich:spacer height="5" />
       <center>
       <a4j:commandButton value="Update"
       reRender="contentPage"
       action="#{docRevisionController.updateAcType}" />
       </center>
       </h:panelGroup>
       </h:panelGrid>
       </center>
       </a4j:form>
      
       <ui:include src="/textModalPanel.xhtml">
       <ui:param name="id" value="reasonModal"></ui:param>
       <ui:param name="rerender" value="revision"></ui:param>
       <ui:param name="title" value="Reason"></ui:param>
       <ui:param name="textLbl" value="Reason"></ui:param>
       <ui:param name="controllerObj" value="#{docRevisionController}"></ui:param>
       <ui:param name="textAttr" value="reason"></ui:param>
       <ui:param name="updAction" value="updReason"></ui:param>
       </ui:include>
      
       <ui:include src="/textModalPanel.xhtml">
       <ui:param name="id" value="changesModal"></ui:param>
       <ui:param name="rerender" value="revision"></ui:param>
       <ui:param name="title" value="ChangesOverview"></ui:param>
       <ui:param name="textLbl" value="Changes Overview"></ui:param>
       <ui:param name="controllerObj" value="#{docRevisionController}"></ui:param>
       <ui:param name="textAttr" value="overview"></ui:param>
       <ui:param name="updAction" value="updOverview"></ui:param>
       </ui:include>
      
       </body>
      </html>
      


      textModalPanel.xhtml

      <html xmlns="http://www.w3.org/1999/xhtml"
       xmlns:ui="http://java.sun.com/jsf/facelets"
       xmlns:h="http://java.sun.com/jsf/html"
       xmlns:rich="http://richfaces.ajax4jsf.org/rich"
       xmlns:a4j="http://richfaces.org/a4j"
       xmlns:c="http://java.sun.com/jstl/core"
       xmlns:f="http://java.sun.com/jsf/core" xml:lang="en" lang="en">
      
      
       <rich:modalPanel id="#{id}" autosized="true">
       <f:facet name="header">
       <h:outputText value="#{title}" />
       </f:facet>
       <f:facet name="controls">
       <span style="cursor: pointer"
       onclick="javascript:Richfaces.hideModalPanel('#{id}')">X</span>
       </f:facet>
      
       <a4j:form>
      
       <script type="text/javascript">
       // This scripts test if a server side error has occured
       // If so the modal form is not hidden
       function chkStatus(formRef, status, panal) {
      
       var errOccurred = document.getElementById(formRef.name + ':' + status);
      
       if (errOccurred.value == 'false') {
       Richfaces.hideModalPanel(panal);
       }
       }
       </script>
      
       <h:panelGrid columns="2" border="0"
       columnClasses="CtaRvaM, CtaLvaM">
       <h:outputLabel for="text" value="#{textLbl}:" styleClass="LblNormal" />
       <h:inputTextarea id="text" value="#{controllerObj[textAttr]}" rows="10" cols="40" />
       </h:panelGrid>
       <center>
       <h:panelGrid columns="2" border="0" cellpadding="10">
       <a4j:commandButton id="upd" value="Apply" reRender="modalError,#{rerender}"
       action="#{controllerObj[updAction]}"
       oncomplete="chkStatus(this.form, 'modalError', '#{id}');" />
      
       <a4j:commandButton id="cnl" value="Cancel" reRender="#{id}"
       onclick="javascript:Richfaces.hideModalPanel('#{id}')" />
       </h:panelGrid>
       </center>
       <h:inputHidden id="modalError" value="#{controllerObj['modalError']}" />
      
       </a4j:form>
       </rich:modalPanel>
      </html>
      [/img]