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

a4j:commandbutton under rich:tab

ysufyan Sep 11, 2009 2:12 PM

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

ysufyan Sep 12, 2009 3:59 PM (in response to ysufyan)

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

Thanks,
Yasir.
Actions
2. Re: a4j:commandbutton under rich:tab

nbelaevski Sep 14, 2009 7:30 AM (in response to ysufyan)

Hi Yasir,

What tabs you are talking about - browser tabs or rich:tab components?
Actions
3. Re: a4j:commandbutton under rich:tab

ysufyan Sep 14, 2009 10:50 AM (in response to ysufyan)

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.
Actions
4. Re: a4j:commandbutton under rich:tab

saini.sushant Sep 14, 2009 11:35 AM (in response to ysufyan)
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?
Actions

5. Re: a4j:commandbutton under rich:tab

ysufyan Sep 14, 2009 12:47 PM (in response to ysufyan)

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.

Go to original post