5 Replies Latest reply on Sep 14, 2009 12:47 PM by Yasir Qureshi

    a4j:commandbutton under rich:tab

    Yasir Qureshi Newbie

      Hi All,

      I am facing a weirdest issue, I have a page that is rendered under a tab, the included page has a <a4j:commandButton> the problem is I am using some javascript in oncomplete property of button. Everything is working fine but whatever javascript is there in oncomplete is getting printed in the bottom of the page. Strange thing is if I open included page in its own window without being included in a tab everything works fine and javascript is not printed at the bottom of the page.

      Thanks,
      Yasir.

        • 1. Re: a4j:commandbutton under rich:tab
          Yasir Qureshi Newbie

          No one else have faced this issue? I am surprise If I am the first one to report it.

          Thanks,
          Yasir.

          • 2. Re: a4j:commandbutton under rich:tab
            Nick Belaevski Master

            Hi Yasir,

            What tabs you are talking about - browser tabs or rich:tab components?

            • 3. Re: a4j:commandbutton under rich:tab
              Yasir Qureshi Newbie

              I am talking about rich:tab, I have a rich:tabpanel in a page lets say parent.xhtml that got four rich:tab including 4 different pages.


              <rich:tabpanel>
              <rich:tab>
              <a4j:include viewId="child.xhtml"/>
              </rich:tab>
              ...
              <rich:tabpanel>

              Now when I hit http://localhost/app/parent.xhtml, the problem is in any of the included page by rich:tab, the javascript in on oncomplete property of a4j:commandbutton is printed at the bottom of the page, there is no javascript error, this is how my a4j:commandbutton looks:



              <a4j:commandButton action="#{myBean.doThis}" oncomplete="#{rich:component('ABCModalPanel')}.show()"/>.


              I am trying to open a rich:modalPanel in oncomplete. I do get a rich:modalPanel when the request is completed but the javascript :
              document.getElementById('ABCModalPanel')component.show() is also printed at the bottom of included page i.e child.xhtml.
              This is happening even if I put a simple alert in oncomplete, I do get an alert and alert command is also printed.

              I changed oncomplete to onclick but rich:modalPanel does not show up in that case.

              Now when I hit included page directly as 'non included', I mean http://localhost/app/child.xhtml everything works fine, no javascript is printed at the bottom.

              Thanks,
              Yasir.


              • 4. Re: a4j:commandbutton under rich:tab
                Sushant Saini Novice

                Hi Yasir
                I have created couple of pages using Richfaces Tabs and most of them have a a4j:Commandbutton in them. I just added oncomplete function to these buttons after reading your post and everything is working fine for me.Here is the code I am using

                
                <a4j:commandButton action="#{user.doNothing}" value="Yes" id="Yesdee" oncomplete="alert('rdeee')"></a4j:commandButton>
                
                
                 <a4j:commandButton action="#{user.doNothing}" value="Yes" id="Yesdee" oncomplete="doSomething()"></a4j:commandButton>
                


                Can you please post your code here?

                • 5. Re: a4j:commandbutton under rich:tab
                  Yasir Qureshi Newbie

                  Thanks Sushant for trying to help me, below is how my code looks:

                  The parent page:

                  <html xmlns="http://www.w3.org/1999/xhtml"
                   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:a4j="http://richfaces.org/a4j"
                   xmlns:rich="http://richfaces.org/rich">
                  
                  
                  <ui:composition template="/WEB-INF/layout/layout.xhtml">
                   <ui:define name="body">
                  
                   <a4j:form id="adminForm" styleClass="form">
                   <h:commandLink
                   rendered="#{loginBean.loginDTO.authorizationLevel == 6}"
                   action="#{adminBean.doLoadAdmin}">
                   <h:outputText value="#{msg.gotoAdminPage}" />
                   </h:commandLink><br></br>
                  
                   <h:commandLink
                   action="#{outageBean.doLoadOutage}">
                   <h:outputText value="#{msg.manageOutage}" />
                   </h:commandLink>
                   </a4j:form>
                  
                   <a4j:keepAlive beanName="coverageBean" />
                   <a4j:keepAlive beanName="coverageHistoryBean" />
                   <a4j:keepAlive beanName="dependentBean" />
                   <a4j:keepAlive beanName="commentBean" />
                  
                   <a4j:include viewId="search.xhtml" id="searchInclude" />
                   <a4j:include viewId="associateinfo.xhtml" id="associateInclude" />
                   <a4j:include viewId="changereason.xhtml" id="changeReasonInclude" />
                  
                   <a4j:outputPanel ajaxRendered="true" id="tabsOutputPanelId">
                   <rich:tabPanel switchType="ajax">
                   <rich:tab label="#{msg.coverages}" id="coverageTabId"
                   disabled="#{associateInfoBean.associate == null}"
                   action="#{dashboardBean.doSelectCoverageTab}">
                   <a4j:include viewId="coverage.xhtml" />
                   </rich:tab>
                   <rich:tab label="#{msg.coverageHistory}"
                   disabled="#{associateInfoBean.associate == null}"
                   action="#{dashboardBean.doSelectCoverageHistoryTab}">
                   <a4j:include viewId="coveragehistory.xhtml" />
                   </rich:tab>
                   <rich:tab label="#{msg.dependents}" id="dependentTabId"
                   disabled="#{associateInfoBean.associate == null}"
                   action="#{dashboardBean.doSelectDependentTab}">
                   <a4j:include viewId="dependent.xhtml" />
                   </rich:tab>
                   <rich:tab label="#{msg.comments}" id="commentTabId"
                   disabled="#{associateInfoBean.associate == null}"
                   action="#{dashboardBean.doSelectCommentTab}">
                   <a4j:include viewId="comment.xhtml" />
                   </rich:tab>
                   </rich:tabPanel>
                   </a4j:outputPanel>
                   </ui:define>
                  </ui:composition>
                  </html>
                  
                  


                  The included page coverage.xhtml in one of the tabs:
                  <html xmlns="http://www.w3.org/1999/xhtml"
                   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:a4j="http://richfaces.org/a4j"
                   xmlns:rich="http://richfaces.org/rich">
                  
                  <head>
                  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
                  </head>
                  <f:view>
                   <f:loadBundle
                   basename="com.walmart.benefitsplanadmin.web.message.MessageResource"
                   var="msg" />
                   <body>
                   <div align="center"><rich:messages globalOnly="true"
                   errorClass="errorClass" infoClass="infoClass" /></div>
                  
                   <a4j:outputPanel id="coveragePanel">
                   <a4j:form id="coverageForm" styleClass="form">
                   <rich:dataTable binding = "#{coverageBean.dataTable}" id="coverageTableId" border="1" width="100%"
                   value="#{coverageBean.coverages}" var="coverage">
                  
                   <f:facet name="header">
                   <h:outputText value="#{msg.coverages}" />
                   </f:facet>
                  
                   <rich:column>
                   <f:facet name="header">
                   <h:outputText value="#{msg.planName}" />
                   </f:facet>
                   <h:outputText value="#{coverage.planName}" />
                   </rich:column>
                   <rich:column>
                   <f:facet name="header">
                   <h:outputText value="#{msg.coverage}" />
                   </f:facet>
                  
                   <h:selectOneListbox id="coverageListId" rendered="#{coverage.coverageItemList != null}"
                   styleClass="selectOneListbox" size="1"
                   value="#{coverage.selectedCoverage}" disabled="#{!changeReasonBean.saveEnable}"
                   valueChangeListener="#{coverageBean.doToggleCoverage}" >
                  
                   <a4j:support event="onchange" reRender="coveragePanel" value="#{coverage}"
                   target="#{coverageBean.coverageDTO}" ajaxSingle="true" />
                   <f:selectItems value="#{coverage.coverageItemList}" />
                  
                  
                   </h:selectOneListbox>
                   </rich:column>
                   <rich:column>
                   <f:facet name="header">
                   <h:outputText value="#{msg.familyTier}" />
                   </f:facet>
                   <h:selectOneListbox id="familyTierListId" rendered="#{coverage.familyTierItemList != null}"
                   styleClass="selectOneListbox" size="1"
                   value="#{coverage.selectedFamilyTier}" disabled="#{!changeReasonBean.saveEnable}"
                   valueChangeListener="#{coverageBean.doToggleFamilyTier}">
                  
                   <a4j:support event="onchange" reRender="coveragePanel"
                   ajaxSingle="true" />
                  
                   <f:selectItems value="#{coverage.familyTierItemList}" />
                   </h:selectOneListbox>
                   </rich:column>
                   <rich:column>
                   <f:facet name="header">
                   <h:outputText value="#{msg.waitDays}" />
                   </f:facet>
                   <h:outputText value="#{coverage.waitDays}" />
                   </rich:column>
                   <rich:column>
                   <f:facet name="header">
                   <h:outputText value="#{msg.eligibilityDate}" />
                   </f:facet>
                   <h:outputText value="#{coverage.eligibilityDate}" >
                   <f:convertDateTime pattern="MM/dd/yyyy" timeZone="America/Chicago" type="date"/>
                   </h:outputText>
                   </rich:column>
                   <rich:column>
                   <f:facet name="header">
                   <h:outputText value="#{msg.coverageBegin}" />
                   </f:facet>
                   <h:outputText value="#{coverage.coverageBeginDate}" >
                   <f:convertDateTime pattern="MM/dd/yyyy" timeZone="America/Chicago" type="date"/>
                   </h:outputText>
                   </rich:column>
                   <rich:column>
                   <f:facet name="header">
                   <h:outputText value="#{msg.originalCoverage}" />
                   </f:facet>
                   <h:outputText value="#{coverage.originalCoverageDate}" >
                   <f:convertDateTime pattern="MM/dd/yyyy" timeZone="America/Chicago" type="date"/>
                   </h:outputText>
                   </rich:column>
                   <rich:column>
                   <f:facet name="header">
                   <h:outputText value="#{msg.coverageEnd}" />
                   </f:facet>
                   <h:outputText value="#{coverage.coverageEndDate}" >
                   <f:convertDateTime pattern="MM/dd/yyyy" timeZone="America/Chicago" type="date"/>
                   </h:outputText>
                   </rich:column>
                   <rich:column>
                   <f:facet name="header">
                   <h:outputText value="#{msg.elecInd}" />
                   </f:facet>
                   <h:outputText value="#{coverage.electiveIndicator}" />
                   </rich:column>
                   <rich:column>
                   <f:facet name="header">
                   <h:outputText value="#{msg.rate}" />
                   </f:facet>
                   <h:outputText value="#{coverage.rate}" />
                   </rich:column>
                   <rich:column>
                   <f:facet name="header">
                   <h:outputText value="POGH" />
                   </f:facet>
                   <h:outputText value="#{coverage.poghRequired}" />
                   </rich:column>
                   <rich:column>
                   <f:facet name="header">
                   <h:outputText value="#{msg.status}" />
                   </f:facet>
                   <h:outputText value="#{coverage.status}" />
                   </rich:column>
                   </rich:dataTable>
                   <a4j:outputPanel id="buttonPanelId" ajaxRendered="true">
                  
                   <a4j:commandButton action="#{coverageBean.doSavePogh}" id="savepoghButtonId" styleClass="commandButton"
                   value="#{msg.save}" disabled="#{!changeReasonBean.saveEnable}"
                   oncomplete="#{rich:component('POGHModalPanel')}.show()"
                   reRender="buttonPanelId,changeReasonInclude:form1:changeButtonId" />
                  
                   <a4j:commandButton action="#{coverageBean.doCancel}" styleClass="commandButton"
                   id="cancelButtonId" value="#{msg.cancel}" disabled="#{!changeReasonBean.saveEnable}"
                   oncomplete="#{rich:component('POGHModalPanel')}.hide()"
                   reRender="buttonPanelId,changeReasonInclude:form1:changeButtonId"
                   />
                   </a4j:outputPanel>
                   </a4j:form>
                   </a4j:outputPanel>
                  
                   <!-- Modal Panel to show POGH -->
                   <rich:modalPanel id="POGHModalPanel" autosized="true" width="360"
                   height="80" moveable="false" resizeable="false" style="border: 1px solid #000000;" rendered="#{coverageBean.isPoghReq}">
                   <f:facet name="header">
                  
                   </f:facet>
                   <f:facet name="controls">
                   <h:panelGroup>
                   <h:graphicImage value="/images/close.gif" id="hidelink" styleClass="hidelink"/>
                   <rich:componentControl for="POGHModalPanel" attachTo="hidelink" operation="hide" event="onclick" />
                   </h:panelGroup>
                   </f:facet>
                   <a4j:form>
                   <f:facet name="header">
                  
                   </f:facet>
                   <f:facet name="controls">
                   <h:panelGroup>
                   <h:graphicImage value="images/close.gif" id="hidelink" />
                   <rich:componentControl for="POGHModalPanel" attachTo="hidelink"
                   operation="hide" event="onclick" />
                   </h:panelGroup>
                   </f:facet>
                   <a4j:outputPanel ajaxRendered="true">
                   <h:panelGrid columns="1">
                   <h:outputText value="#{coverageBean.poghStr}"/>
                   </h:panelGrid>
                   <h:panelGrid columns="2">
                   <a4j:commandButton action="#{coverageBean.doSave}" id="continueMBButtonId"
                   oncomplete="#{rich:component('POGHModalPanel')}.hide()"
                   reRender="buttonPanelId,changeReasonInclude:form1:changeButtonId"
                   value="#{msg.continue}">
                   </a4j:commandButton>
                   <a4j:commandButton action="#{coverageBean.doCancel}" id="cancelMBButtonId"
                   oncomplete="#{rich:component('POGHModalPanel')}.hide()"
                   reRender="buttonPanelId,changeReasonInclude:form1:changeButtonId"
                   value="#{msg.cancel}" />
                   </h:panelGrid>
                   </a4j:outputPanel>
                   </a4j:form>
                   </rich:modalPanel>
                  
                   </body>
                  </f:view>
                  </html>
                  



                  Hope to find solution.

                  Thanks everyone.