3 Replies Latest reply on Oct 18, 2007 1:46 AM by dmitry.demyankov

    submitting modalPanel form submits the main xhtml form

    asookazian

      I have a modalPanel embedded in the .xhtml below. When it pops up and I click submit in the modalPanel, the form in the .xhtml below gets submitted as well (i.e. the JSF refreshes/reloads). Is there a way around this? I am trying to capture the text entered in the modalPanel and transfer that data to the appropriate row/cell the user entered it for in Seam2.0.0.CR2. thx.

      <!DOCTYPE composition 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:s="http://jboss.com/products/seam/taglib"
       xmlns:ui="http://java.sun.com/jsf/facelets"
       xmlns:f="http://java.sun.com/jsf/core"
       xmlns:h="http://java.sun.com/jsf/html"
       xmlns:rich="http://richfaces.ajax4jsf.org/rich"
       xmlns:a4j="https://ajax4jsf.dev.java.net/ajax"
       template="layout/template.xhtml">
      
      
      
      <ui:define name="body">
      
       <script type="text/javascript">
      
       function processComment(obj) {
      
       //if they clicked no, popup modal response window for comment
       if (obj.value == 'false') {
       value1 = 'Testing Arbi';
       Richfaces.showModalPanel('mp',{width:450, top:200, param1: value1});
       }
       }
      
       function editComment(obj) {
      
       value1 = 'Please edit your comment';
       Richfaces.showModalPanel('mp',{width:450, top:200, param1: value1});
      
       }
      
       </script>
      
       <h:messages globalOnly="true" styleClass="message"/>
      
       <rich:modalPanel id="mp" minHeight="200" minWidth="450"
       height="200" width="500" zindex="2000" onshow="alert(event.parameters.param1)">
       <f:facet name="header">
       <h:outputText value="#{commentAction.header}" />
       </f:facet>
      
       <h:form>
       <h:inputText value="#{note.noteText}"/>
       <h:commandButton value="submit" action="#{commentAction.submit}"/>
       </h:form>
       </rich:modalPanel>
      
       <h:form>
       <h:inputText value="#{securityAuditAction.networkId}"/>
       <h:commandButton value="Submit"/>
       </h:form>
      
       <h:form>
       <h:outputText value="No Direct Reports" rendered="#{myAuditList != null and myAuditList.rowCount==0}"/>
       <h:dataTable value="#{myAuditList}" var="myRow" rendered="#{myAuditList.rowCount>0}"
       bgcolor="#F1F1F1" border="10" width="100%" cellpadding="0" cellspacing="0"
       dir="LTR" frame="hsides">
       <h:column>
       <f:facet name="header">Employee Name</f:facet>
      
       <h:outputText value="#{myRow[0].id.employeeName}"/>
       </h:column>
      
       <h:column>
       <f:facet name="header">Account Approved?</f:facet>
       <h:selectOneRadio value="#{myRow[1].icomsAccountApproved}" onclick="processComment(this);">
       <f:selectItems value="#{securityAuditAction.securityAuditRadioButtons}" />
       </h:selectOneRadio>
       <h:graphicImage value="/img/icon_edit.gif" onclick="editComment(this);" rendered="#{commentAction.isEmpty}"/>
       </h:column>
      
       <h:column>
       <f:facet name="header">Security Level Approved?</f:facet>
       <h:selectOneRadio value="#{myRow[1].securityLevelApproved}" onclick="processComment(this);">
       <f:selectItems value="#{securityAuditAction.securityAuditRadioButtons}" />
       </h:selectOneRadio>
       <h:graphicImage value="/img/icon_edit.gif" onclick="editComment(this);"/>
       </h:column>
      
       <h:column>
       <f:facet name="header">Adjustment Limit Approved?</f:facet>
       <h:selectOneRadio value="#{myRow[1].adjustmentLimitApproved}" onclick="processComment(this);">
       <f:selectItems value="#{securityAuditAction.securityAuditRadioButtons}" />
       </h:selectOneRadio>
       <h:graphicImage value="/img/icon_edit.gif" onclick="editComment(this);"/>
       </h:column>
      
      
      
       </h:dataTable>
      
       <h:commandButton value="submit" action="#{securityAuditAction.submit}" rendered="#{myAuditList.rowCount>0}"/>
      
       </h:form>
      
      </ui:define>
      </ui:composition>


        • 1. Re: submitting modalPanel form submits the main xhtml form
          asookazian

          is it an alternative to submitting the form to just use a javascript function call with the onhide attribute of the modalPanel component? setting the component text to the appropriate cell when the modalPanel closes??

          • 2. Re: submitting modalPanel form submits the main xhtml form
            asookazian

            How bout the below? I added a <h:graphicImage> tag. I have a new js function called setMessage which I want to pass the inputText box's text content to this new setMessage js function. How can I do this? How can I reference this message value in the modalPanel using the DOM?

            <rich:modalPanel id="mp" minHeight="200" minWidth="450"
             height="200" width="500" zindex="2000" onshow="alert(event.parameters.param1)" onhide="alert('onhide executed')">
             <f:facet name="header">
             <h:outputText value="#{commentAction.header}" />
             </f:facet>
             <f:facet name="controls">
             <h:graphicImage value="/img/icon_edit.gif" style="cursor:pointer" onclick="setMessage(this);Richfaces.hideModalPanel('mp')" />
             </f:facet>
             <h:form>
             <h:inputText value="#{note.noteText}"/>
             <h:commandButton value="submit" action="#{commentAction.submit}"/>
             </h:form>
             </rich:modalPanel>


            • 3. Re: submitting modalPanel form submits the main xhtml form
              dmitry.demyankov

              You can try using a4j:commandButton inside modalPanel to submit only form inside modalPanel.