[英]a4j:support within a rich:modalPanel
I've hit a wall. 我撞墙了。 I know the a4j and rich tags pretty well (I use Seam 2.2.0 and Richfaces 3.3.1). 我非常了解a4j和rich标签(我使用Seam 2.2.0和Richfaces 3.3.1)。 However, I'm trying to do something quite simple, but in a rich:modalPanel. 但是,我正在尝试执行一个非常简单的操作,但是要使用rich:modalPanel。
It seems that rich:modalPanels do not allow Ajax events to be fired. 似乎rich:modalPanels不允许触发Ajax事件。 Here's a simple breakdown: I have ah:selectOneMenu with some items in it and whose value is attached to a backing bean. 这是一个简单的细分:我有ah:selectOneMenu,其中包含一些项,其值附加到支持bean。 Attached to that h:selectOneMenu is a a4j:support tag so that whenever the change event is fired, the backing bean should get updated. 附加到该h:selectOneMenu的是a4j:support标记,以便每当触发change事件时,都应更新后备bean。 Truly simple stuff eh? 真的很简单的东西吗?
However, when this h:selectOneMenu is in a rich:modalPanel the onchange event doesn't update the backing bean until the rich:modalPanel closes. 但是,当此h:selectOneMenu位于rich:modalPanel中时,onrich事件在rich:modalPanel关闭之前不会更新后备bean。
I can confirm this because I'm running it in Eclipse debug mode and I have a breakpoint on the setter of the property that's hooked up to the h:selectOneMenu. 我可以确认这一点,因为我正在Eclipse调试模式下运行它,并且在连接到h:selectOneMenu的属性的设置器上有一个断点。 This is driving me mad! 这让我发疯了! This is vanilla stuff for Ajax, but rich:modalPanels don't seem to allow it. 对于Ajax来说,这是香草的东西,但是rich:modalPanels似乎不允许这样做。
So, the question is: can I do Ajax stuff within a rich:modalPanel? 因此,问题是:我可以在rich:modalPanel中做Ajax的东西吗? I'm basically trying to use the rich:modalPanel as a form (I've tried a4j:form and h:form to no avail) that reacts to changes to the drop down (eg when the user changes the drop down, a certain part of the form should get reRendered). 我基本上是在尝试使用rich:modalPanel作为一种形式(我尝试过a4j:form和h:form都无济于事),该形式会对下拉列表的更改做出反应(例如,当用户更改下拉列表时,表格的一部分应重新呈现)。 Am I trying to do something that's not possible? 我是否正在尝试做一些不可能的事情?
Here's a simplified version of the modalPanel: 这是modalPanel的简化版本:
<rich:modalPanel id="quickAddPanel">
<div>
<a4j:form id="quickAddPaymentForm" ajaxSubmit="true">
<s:decorate id="paymentTypeDecorator">
<a4j:region>
<h:selectOneMenu
id="paymentType"
required="true"
value="#{backingBean.paymentType}"
tabindex="1">
<s:selectItems
label="#{type.description}"
noSelectionLabel="Please select..."
value="#{incomingPaymentTypes}"
var="type"/>
<s:convertEnum/>
<a4j:support
ajaxSingle="true"
event="onchange"
eventsQueue="paymentQueue"
immediate="true"
limitToList="true"
reRender="paymentTypeDecorator, paymentDetailsOutputPanel, quickAddPaymentForm"/>
</h:selectOneMenu>
</a4j:region>
</s:decorate>
</fieldset>
<fieldset class="standard-form">
<div class="form-title">Payment details</div>
<a4j:outputPanel id="paymentDetailsOutputPanel">
<h:outputText value="This should change whenever dropdown changes: #{backingBean.paymentType}"/>
</a4j:outputPanel>
</fieldset>
</a4j:form>
</div>
</rich:modalPanel>
Regards, Andy 问候,安迪
use <h:form>
使用<h:form>
and remove following attributes from : ajaxSingle="true", immediate="true" 并从以下属性中删除以下属性:ajaxSingle =“ true”,Instant =“ true”
It should work. 它应该工作。 Check with a4j:log that updated markup (which you re-render) is sent from the server. 使用a4j:log检查是否从服务器发送了更新的标记(您重新渲染的标记)。 I don't believe it causes the problem, but you can change a few things in your code: 我不认为这会导致问题,但是您可以在代码中进行一些更改:
ajaxSubmit=true - you don't really need it as you use a4j:support ajaxSingle=true and a4j:region - is the same thing in your case limitToList=true - you don't need it as you don't update any other areas on the page. ajaxSubmit = true-使用a4j:support时实际上并不需要它,而a4x:region和a4j:region是相同的-在您的情况下limitToList = true-您不需要它,因为您不更新其他任何东西页面上的区域。
Check HTML options generated by f:selectItems or s:selectItems do not contain trailing spaces (view page source from browser): 检查由f:selectItems或s:selectItems生成的HTML选项是否不包含结尾空格(来自浏览器的查看页面源):
<select>
<option value="0 ">Select One </option>
<option value="id1 ">Choice 1 </option>
<option value="id2 ">Choice 2 </option>
<option value="id3 ">Choice 3 </option>
</select>
If so, remove the trailing white spaces in server side code, 如果是这样,请删除服务器端代码中的尾部空白,
<select>
<option value="0">Select One</option>
<option value="id1">Choice 1</option>
<option value="id2">Choice 2</option>
<option value="id3">Choice 3</option>
</select>
I found that the trailing spaces prevent Ajax event from firing when a4j:support and h:selectOneMenu working inside a rich:modalPanel, even though it works fine outside of rich:modalPanel. 我发现,当a4j:support和h:selectOneMenu在rich:modalPanel内部工作时,即使在rich:modalPanel外部工作正常,尾部空格也会阻止Ajax事件触发。 Here is a working sample code: 这是一个有效的示例代码:
<h:form>
<rich:modalPanel id="myPanel" autosized="true" width="700" showWhenRendered="true">
<table cellpadding="4" cellspacing="2" align="center" width="100%">
<tr>
<td align="left">
<h:selectOneMenu styleClass="dropdown" id="dropdownList"
value="#{backbean.currentChoice}"
valueChangeListener="#{backbean.choiceChanged}" >
<f:selectItems value="#{backbean.choiceItems}"></f:selectItems>
<a4j:support event="onchange" reRender="whatPicked" ajaxSingle="true" />
</h:selectOneMenu>
</td>
</tr>
<tr>
<td>
<a4j:outputPanel id="whatPicked">
<h:outputText value="#{backbean.currentChoice }"></h:outputText>
</a4j:outputPanel>
</td>
</tr>
</table>
</rich:modalPanel>
</h:form>
Try taking form outside of your modalPanel tag: 尝试在您的modalPanel标签之外进行表单处理:
<a4j:form id="quickAddPaymentForm" ajaxSubmit="true">
<rich:modalPanel id="quickAddPanel">
<div>
also make sure your "quickAddPaymentForm" is not nested 还要确保您的“ quickAddPaymentForm”没有嵌套
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.