Question

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

似乎富有：modalPanels不允许触发Ajax事件。这是一个简单的细分：我有一个h：selectOneMenu，其中包含一些项目，其值附加到支持bean。附加到h：selectOneMenu是一个a4j：support标记，这样无论何时触发change事件，都应该更新支持bean。真的很简单吗？

但是，当这个h：selectOneMenu位于rich：modalPanel中时，onchange事件不会更新辅助bean，直到rich：modalPanel关闭。

我可以确认一下，因为我在Eclipse调试模式下运行它，并且我在属性的setter上有一个断点，它连接到h：selectOneMenu。这让我很生气！对于Ajax来说这是一个很好的东西，但是很丰富：modalPanel似乎不允许它。

所以，问题是：我可以在rich：modalPanel中做Ajax吗？我基本上试图使用rich：modalPanel作为一个表单（我试过a4j：form和h：form无效）对下拉的更改作出反应（例如当用户更改下拉时，某个表单的一部分应该得到reRendered）。我想做一些不可能的事情吗？

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

使用<h:form>

并从以下属性中删除：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生成的HTML选项：selectItems不包含尾随空格（从浏览器查看页面源）：

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

我发现当a4j：support和h：selectOneMenu在rich：modalPanel中工作时，尾随空格会阻止Ajax事件触发，即使它在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>

a4j：在rich：modalPanel中支持

4 个答案: