a4j: поддержка внутри rich: modalPanel

Question

Я врезался в стену. Я хорошо знаю теги a4j и rich (я использую Seam 2.2.0 и Richfaces 3.3.1). Тем не менее, я пытаюсь сделать что-то довольно простое, но богатое: modalPanel.

Кажется, что rich: modalPanels не позволяют запускать события Ajax. Вот простая разбивка: У меня есть h: selectOneMenu с некоторыми элементами в нем, чье значение привязано к компоненту поддержки. К этому h: selectOneMenu прикреплен тег a4j: support, поэтому всякий раз, когда вызывается событие изменения, компонент поддержки должен обновляться. Действительно простые вещи, а?

Однако, когда этот h: selectOneMenu находится в rich: modalPanel, событие onchange не обновляет компонент поддержки до тех пор, пока rich: modalPanel не закроется.

Я могу подтвердить это, потому что я запускаю его в режиме отладки Eclipse, и у меня есть точка останова на установщике свойства, которое подключено к h: selectOneMenu. Это сводит меня с ума! Это ванильный материал для Ajax, но богатый: modalPanels, похоже, не позволяет этого.

Итак, вопрос в том, могу ли я делать Ajax с помощью rich: modalPanel? Я в основном пытаюсь использовать rich: modalPanel как форму (я пробовал a4j: form и h: form безрезультатно), которая реагирует на изменения в раскрывающемся списке (например, когда пользователь меняет раскрывающийся список, определенное часть формы должна быть перерисована). Я пытаюсь сделать что-то, что не возможно?

Вот упрощенная версия модальной панели:

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

С уважением, Andy

Answer 1

используйте <h:form>

и удалите следующие атрибуты из: ajaxSingle = "true", немедленное = "true"

Answer 2

должно работать.Проверьте с помощью a4j: log, что обновленная разметка (которую вы повторно визуализируете) отправляется с сервера.Я не верю, что это вызывает проблему, но вы можете изменить несколько вещей в своем коде:

ajaxSubmit = true - вам это не нужно, поскольку вы используете a4j: support ajaxSingle = true и a4j:region - то же самое в вашем случае limitToList = true - вам это не нужно, так как вы не обновляете другие области на странице.

Answer 3

Проверьте параметры HTML, сгенерированные f: selectItems или s: 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>

Я обнаружил, что конечные пробелы предотвращают запуск события 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>

Answer 4

Попробуйте принять форму за пределами вашего тега modalPanel:

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

также убедитесь, что ваша "quickAddPaymentForm" не вложена