2

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

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

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

我可以确认这一点，因为我在 Eclipse 调试模式下运行它，并且我在连接到 h:selectOneMenu 的属性的设置器上有一个断点。这让我发疯！这是 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>

问候，安迪

4

4 回答 4

3

利用<h:form>

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

于 2011-01-17T06:56:19.923 回答
1

它应该工作。检查 a4j:log 更新的标记（您重新渲染）是从服务器发送的。我不相信它会导致问题，但您可以在代码中更改一些内容：

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

于 2011-01-11T19:21:25.153 回答
0

尝试在您的 modalPanel 标记之外采取形式：

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

还要确保您的“quickAddPaymentForm”没有嵌套

于 2011-01-12T17:56:52.110 回答
0

检查 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>
于 2013-09-11T16:34:35.073 回答