[richfaces-issues] [JBoss JIRA] (RF-12040) Multi-form document - command button (submit) does not work after rendering

Brian Leathem (JIRA) jira-events at lists.jboss.org
Wed Mar 21 16:02:48 EDT 2012


     [ https://issues.jboss.org/browse/RF-12040?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ]

Brian Leathem updated RF-12040:
-------------------------------

           Description: 
We have one page that contains two forms. The first form contain a menus bar (ajax switchType) while the second contains a tabPanel (also in ajax switchType). When a user select a menu, we select the corresponding tab that contains a submit button. Once the tab is selected, the submit button does not work. We have to click twice for submitting.

# If we move the menu bar inside the second forms, it is working. 
# If we set the menu bar in client switchType, selecting the menu doesn't do anything.
# If we set the menu bar in server switchType it's working.

As the rendering is well executed, the submit button should works but is not whatever we set as render="@all, or any valid id".

We have prepared a small application that demonstrates the case. This is a simple but realistic application. Edit the index.xhtml to play with the menu. Let us know if we doing something wrong.

Note also that the JIRA JAVASERVERFACES-2016 was reopened :[JIRA] Reopened: (JAVASERVERFACES-2016) Resources not loaded when using a dynamic ui:inlclude and rendered via ajax

[ http://java.net/jira/browse/JAVASERVERFACES-2016?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ]

{code:title=Relevant Facelet markup}
<?xml version="1.0" encoding="UTF-8" ?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:rich="http://richfaces.org/rich"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	template="/templates/basePage.xhtml">

	<ui:define name="header">
		<ui:include src="/fragments/header.xhtml" />
	</ui:define>

	<ui:define name="content">
		<!--               -->
		<!--   MENUS BAR   -->
		<!--               -->
		<h:form id="MenuForm">
			<rich:toolbar id="mainToolBar" height="28" itemSeparator="line">
				<rich:toolbarGroup id="menusToolBar">
					<!--             -->
					<!--   MENU ONE  -->
					<!--             -->
					<rich:dropDownMenu id="menuOne" mode="ajax">
						<f:facet name="label">
							<h:panelGroup>
								<h:outputText value="#{msg['menu.item.one']}" />
							</h:panelGroup>
						</f:facet>
						<!--                    -->
						<!--  ITEMS MANAGEMENT  -->
						<!--                    -->
						<rich:menuItem id="item-management"
									label="#{msg['menu.item.one.items.management']}"
								   action="#{desktopController.doActivateTabItems}"
								   render="desktopTabs" />
					</rich:dropDownMenu>
				</rich:toolbarGroup>
			</rich:toolbar>
		</h:form>
		<br />
		<br />
		<!--                 -->
		<!--   DESKTOP TABS  -->
		<!--                 -->
		<h:form id="desktopForm">
			<!--                -->
			<!--   STATIC TABS  -->
			<!--                -->
			<rich:tabPanel id="desktopTabs"
				   switchType="ajax"
			   headerPosition="top"
				   activeItem="#{desktopController.activeTab}"
		   itemChangeListener="#{desktopController.doItemChangeListener}"
					immediate="true">

				<rich:tab id="tab-static-1" name="tab-static-1" header="#{msg['desktop.tab.static.header.1']}">
					<!--                  -->
					<!-- TAB #1 - STATIC  -->
					<!--                  -->
					#1
				</rich:tab>
				<rich:tab id="tab-static-2" name="tab-static-2" header="#{msg['desktop.tab.static.header.2']}">
					<!--                  -->
					<!-- TAB #2 - STATIC  -->
					<!--                  -->
					<a4j:outputPanel id="toggleTabContent" layout="block">
						<!--                  -->
						<!--  TOGGLE CONTENT  -->
						<!--                   -->
						<a4j:commandButton id="toggleCommandContent"
										value="#{msg[desktopController.togglePanelLabel]}"
							   actionListener="#{desktopController.doToggleTabContent}"
									   render="toggleTabContent">
						</a4j:commandButton>
						<br />
						<br />
						<ui:fragment rendered="#{desktopController.isPanelOne}">
							<!--              -->
							<!--  CONTENT #1  -->
							<!--              -->
							<ui:include src="panelOne.xhtml" />
						</ui:fragment>
						<ui:fragment rendered="#{desktopController.isPanelTwo}">
							<!--             -->
							<!--  CONTENT #2 -->
							<!--             -->
							<ui:include src="panelTwo.xhtml" />
						</ui:fragment>
					</a4j:outputPanel>
				</rich:tab>
				<c:forEach items="#{desktopController.desktopBean.tabs}" var="tab">
					<rich:tab id="#{tab.id}" name="#{tab.id}" onenter="enterTab('#{tab.id}');">
						<!--                -->
						<!--  DYNAMIC TABS  -->
						<!--                -->
						<f:facet name="header">
							<h:panelGrid columns="2" title="#{desktopController.getTabHeader(tab.id)}">
								<h:outputText value="#{desktopController.getTabHeader(tab.id)}" />
								<h:graphicImage value="/images/closeButton.png"
										   styleClass="closeButton"
											  onclick="closeTab('#{tab.id}');event.stopPropagation();" />
							</h:panelGrid>
						</f:facet>
						<c:if test="#{tab.id eq desktopController.activeTab}">
							<f:subview id="#{tab.id}-subview">
								<ui:include src="#{tab.xhtmlFile}" />
							</f:subview>
						</c:if>
					</rich:tab>
				</c:forEach>
			</rich:tabPanel>
		</h:form>
		<!--             -->
		<!-- ENTER TABS  -->
		<!--             -->
		<a4j:jsFunction name="enterTab">
			<a4j:param name="activeTab" assignTo="#{desktopController.activeTab}" />
		</a4j:jsFunction>
		<!--               -->
		<!-- CLOSE TAB     -->
		<!--               -->
		<a4j:jsFunction id="closeTab" name="closeTab" action="#{desktopController.doCloseTab}" render="desktopTabs">
			<a4j:param name="tabId" assignTo="#{desktopController.closeTabId}" />
		</a4j:jsFunction>
	</ui:define>

	<ui:define name="footer">
		<ui:include src="/fragments/footer.xhtml" />
	</ui:define>
</ui:composition>
{code}

  was:
We have one page that contains two forms. The first form contain a menus bar (ajax switchType) while the second contains a tabPanel (also in ajax switchType). When a user select a menu, we select the corresponding tab that contains a submit button. Once the tab is selected, the submit button does not work. We have to click twice for submitting.

1) If we move the menu bar inside the second forms, it is working. 
2) If we set the menu bar in client switchType, selecting the menu doesn't do anything.
3) If we set the menu bar in server switchType it's working.

As the rendering is well executed, the submit button should works but is not whatever we set as render="@all, or any valid id".

We have prepared a small application that demonstrates the case. This is a simple but realistic application. Edit the index.xhtml to play with the menu. Let us know if we doing something wrong.

Note also that the JIRA JAVASERVERFACES-2016 was reopened :[JIRA] Reopened: (JAVASERVERFACES-2016) Resources not loaded when using a dynamic ui:inlclude and rendered via ajax

[ http://java.net/jira/browse/JAVASERVERFACES-2016?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ]



    Steps to Reproduce: 
# Setup the application, read the readme.txt file
# Once the index page is displayed, the tab "Items Management" is selected by default
# Click one the first static tab "Tab S-#1"
# From the menu, select the menu "items management"
# Then click on button "New List"
6) A list of item should be displayed

But at the step 5, you have to click twice the button or to do F5 that refresh the whole page, it is like restarting the appl. from the beginning.


  was:
1) Setup the application, read the readme.txt file
2) Once the index page is displayed, the tab "Items Management" is selected by default
3) Click one the first static tab "Tab S-#1"
4) From the menu, select the menu "items management"
5) Then click on button "New List"
6) A list of item should be displayed

But at the step 5, you have to click twice the button or to do F5 that refresh the whole page, it is like restarting the appl. from the beginning.




In the referenced form, I see the rich:menuItem _#item-management_ from h:form _#MenuForm_ has a render target of _desktopTabs_, with is a rich:tabPanel in the h:form _#desktopForm_.  You are attempting to re-render a component in an adjacent form.

I believe you are experiencing the behaviour described in this spec issue:
http://java.net/jira/browse/JAVASERVERFACES_SPEC_PUBLIC-790

As a workaround, I recommend using a single form, and use a4j:region panels automatically where you would have used _ at form_ otherwise.

If you agree this is the problem you are experiencing, I will close this issue as an upstream problem.
                
> Multi-form document - command button (submit) does not work after rendering
> ---------------------------------------------------------------------------
>
>                 Key: RF-12040
>                 URL: https://issues.jboss.org/browse/RF-12040
>             Project: RichFaces
>          Issue Type: Bug
>      Security Level: Public(Everyone can see) 
>         Environment: cssparser-0.9.6 - guava-11.0.1 - hibernate-validator-4.2.0.Final - JSF/Mojarra 2.1.6 - springframework-3.0.6.RELEASE - sac-1.3 - Windows 7 - FireFox 10 - RichFaces 4.2 Final
>            Reporter: Jean ANDRE
>              Labels: waiting_on_user
>         Attachments: NestedWebWithMenu.zip
>
>
> We have one page that contains two forms. The first form contain a menus bar (ajax switchType) while the second contains a tabPanel (also in ajax switchType). When a user select a menu, we select the corresponding tab that contains a submit button. Once the tab is selected, the submit button does not work. We have to click twice for submitting.
> # If we move the menu bar inside the second forms, it is working. 
> # If we set the menu bar in client switchType, selecting the menu doesn't do anything.
> # If we set the menu bar in server switchType it's working.
> As the rendering is well executed, the submit button should works but is not whatever we set as render="@all, or any valid id".
> We have prepared a small application that demonstrates the case. This is a simple but realistic application. Edit the index.xhtml to play with the menu. Let us know if we doing something wrong.
> Note also that the JIRA JAVASERVERFACES-2016 was reopened :[JIRA] Reopened: (JAVASERVERFACES-2016) Resources not loaded when using a dynamic ui:inlclude and rendered via ajax
> [ http://java.net/jira/browse/JAVASERVERFACES-2016?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ]
> {code:title=Relevant Facelet markup}
> <?xml version="1.0" encoding="UTF-8" ?>
> <ui:composition xmlns="http://www.w3.org/1999/xhtml"
> 	xmlns:ui="http://java.sun.com/jsf/facelets"
> 	xmlns:h="http://java.sun.com/jsf/html"
> 	xmlns:f="http://java.sun.com/jsf/core"
> 	xmlns:rich="http://richfaces.org/rich"
> 	xmlns:a4j="http://richfaces.org/a4j"
> 	xmlns:c="http://java.sun.com/jsp/jstl/core"
> 	template="/templates/basePage.xhtml">
> 	<ui:define name="header">
> 		<ui:include src="/fragments/header.xhtml" />
> 	</ui:define>
> 	<ui:define name="content">
> 		<!--               -->
> 		<!--   MENUS BAR   -->
> 		<!--               -->
> 		<h:form id="MenuForm">
> 			<rich:toolbar id="mainToolBar" height="28" itemSeparator="line">
> 				<rich:toolbarGroup id="menusToolBar">
> 					<!--             -->
> 					<!--   MENU ONE  -->
> 					<!--             -->
> 					<rich:dropDownMenu id="menuOne" mode="ajax">
> 						<f:facet name="label">
> 							<h:panelGroup>
> 								<h:outputText value="#{msg['menu.item.one']}" />
> 							</h:panelGroup>
> 						</f:facet>
> 						<!--                    -->
> 						<!--  ITEMS MANAGEMENT  -->
> 						<!--                    -->
> 						<rich:menuItem id="item-management"
> 									label="#{msg['menu.item.one.items.management']}"
> 								   action="#{desktopController.doActivateTabItems}"
> 								   render="desktopTabs" />
> 					</rich:dropDownMenu>
> 				</rich:toolbarGroup>
> 			</rich:toolbar>
> 		</h:form>
> 		<br />
> 		<br />
> 		<!--                 -->
> 		<!--   DESKTOP TABS  -->
> 		<!--                 -->
> 		<h:form id="desktopForm">
> 			<!--                -->
> 			<!--   STATIC TABS  -->
> 			<!--                -->
> 			<rich:tabPanel id="desktopTabs"
> 				   switchType="ajax"
> 			   headerPosition="top"
> 				   activeItem="#{desktopController.activeTab}"
> 		   itemChangeListener="#{desktopController.doItemChangeListener}"
> 					immediate="true">
> 				<rich:tab id="tab-static-1" name="tab-static-1" header="#{msg['desktop.tab.static.header.1']}">
> 					<!--                  -->
> 					<!-- TAB #1 - STATIC  -->
> 					<!--                  -->
> 					#1
> 				</rich:tab>
> 				<rich:tab id="tab-static-2" name="tab-static-2" header="#{msg['desktop.tab.static.header.2']}">
> 					<!--                  -->
> 					<!-- TAB #2 - STATIC  -->
> 					<!--                  -->
> 					<a4j:outputPanel id="toggleTabContent" layout="block">
> 						<!--                  -->
> 						<!--  TOGGLE CONTENT  -->
> 						<!--                   -->
> 						<a4j:commandButton id="toggleCommandContent"
> 										value="#{msg[desktopController.togglePanelLabel]}"
> 							   actionListener="#{desktopController.doToggleTabContent}"
> 									   render="toggleTabContent">
> 						</a4j:commandButton>
> 						<br />
> 						<br />
> 						<ui:fragment rendered="#{desktopController.isPanelOne}">
> 							<!--              -->
> 							<!--  CONTENT #1  -->
> 							<!--              -->
> 							<ui:include src="panelOne.xhtml" />
> 						</ui:fragment>
> 						<ui:fragment rendered="#{desktopController.isPanelTwo}">
> 							<!--             -->
> 							<!--  CONTENT #2 -->
> 							<!--             -->
> 							<ui:include src="panelTwo.xhtml" />
> 						</ui:fragment>
> 					</a4j:outputPanel>
> 				</rich:tab>
> 				<c:forEach items="#{desktopController.desktopBean.tabs}" var="tab">
> 					<rich:tab id="#{tab.id}" name="#{tab.id}" onenter="enterTab('#{tab.id}');">
> 						<!--                -->
> 						<!--  DYNAMIC TABS  -->
> 						<!--                -->
> 						<f:facet name="header">
> 							<h:panelGrid columns="2" title="#{desktopController.getTabHeader(tab.id)}">
> 								<h:outputText value="#{desktopController.getTabHeader(tab.id)}" />
> 								<h:graphicImage value="/images/closeButton.png"
> 										   styleClass="closeButton"
> 											  onclick="closeTab('#{tab.id}');event.stopPropagation();" />
> 							</h:panelGrid>
> 						</f:facet>
> 						<c:if test="#{tab.id eq desktopController.activeTab}">
> 							<f:subview id="#{tab.id}-subview">
> 								<ui:include src="#{tab.xhtmlFile}" />
> 							</f:subview>
> 						</c:if>
> 					</rich:tab>
> 				</c:forEach>
> 			</rich:tabPanel>
> 		</h:form>
> 		<!--             -->
> 		<!-- ENTER TABS  -->
> 		<!--             -->
> 		<a4j:jsFunction name="enterTab">
> 			<a4j:param name="activeTab" assignTo="#{desktopController.activeTab}" />
> 		</a4j:jsFunction>
> 		<!--               -->
> 		<!-- CLOSE TAB     -->
> 		<!--               -->
> 		<a4j:jsFunction id="closeTab" name="closeTab" action="#{desktopController.doCloseTab}" render="desktopTabs">
> 			<a4j:param name="tabId" assignTo="#{desktopController.closeTabId}" />
> 		</a4j:jsFunction>
> 	</ui:define>
> 	<ui:define name="footer">
> 		<ui:include src="/fragments/footer.xhtml" />
> 	</ui:define>
> </ui:composition>
> {code}

--
This message is automatically generated by JIRA.
If you think it was sent incorrectly, please contact your JIRA administrators: https://issues.jboss.org/secure/ContactAdministrators!default.jspa
For more information on JIRA, see: http://www.atlassian.com/software/jira

        


More information about the richfaces-issues mailing list