a4j:rich:modalPanel 内的支持

Question

我碰壁了。 我非常了解 a4j 和 rich 标签（我使用 Seam 2.2.0 和 Richfaces 3.3.1）。但是，我正在尝试做一些非常简单的事情，但是在 rich:modalPanel 中。

rich:modalPanels 似乎不允许触发 Ajax 事件。这是一个简单的细分： 我有 ah:selectOneMenu ，其中包含一些项目，其值附加到支持 bean 上。附加到 h:selectOneMenu 的是 a4j:support 标记，以便每当触发更改事件时，支持 bean 都应该更新。真的很简单的东西吧？

但是，当此 h:selectOneMenu 位于 rich:modalPanel 中时，onchange 事件不会更新支持 bean，直到 rich:modalPanel 关闭。

我可以确认这一点，因为我在 Eclipse 调试模式下运行它，并且在连接到 h:selectOneMenu 的属性的 setter 上有一个断点。 这让我抓狂！这是 Ajax 的普通内容，但 rich:modalPanels 似乎不允许这样做。

所以，问题是：我可以在 rich:modalPanel 中执行 Ajax 操作吗？我基本上尝试使用 rich:modalPanel 作为表单（我尝试过 a4j:form 和 h:form 无济于事），它对下拉列表的更改做出反应（例如，当用户更改下拉列表时，某个表单的一部分应该重新渲染）。我是否正在尝试做一些不可能的事情？

这是 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>

问候， 安迪

Answer 1

使用

并从中删除以下属性：ajaxSingle="true",immediate="true"

Answer 2

它应该有效。使用 a4j:log 检查更新的标记（您重新渲染的）是否从服务器发送。我不认为它会导致问题，但您可以更改代码中的一些内容：

ajaxSubmit=true - 当您使用 a4j:support 时，您并不真正需要它
ajaxSingle=true 和 a4j:region - 在你的情况下是一样的
limitToList=true - 您不需要它，因为您不更新页面上的任何其他区域。

Answer 3

尝试在 modalPanel 标记之外采用表单：

<a4j:form id="quickAddPaymentForm" ajaxSubmit="true">
    <rich:modalPanel id="quickAddPanel">
        <div>

还要确保您的“quickAddPaymentForm”不是嵌套的

Answer 4

检查 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>

如果是这样，请删除服务器端代码中的尾随空格，

<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>

我发现尾随空格会阻止 Ajax 事件在以下情况下触发： a4j:support 和 h:selectOneMenu 在 rich:modalPanel 内部工作，即使它在 rich:modalPanel 外部工作正常。这是一个工作示例代码：

<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>