a4j: Unterstützung in einem Rich: ModalPanel

Question

Ich habe eine Wand getroffen. Ich kenne die Tags a4j und reich ziemlich gut (ich benutze Seam 2.2.0 und Richfaces 3.3.1). Ich versuche jedoch, etwas ganz einfaches zu tun, aber in einem Rich: ModalPanel.

Es scheint, dass Rich: ModalPanels keine Ajax-Ereignisse ausgelöst werden können. Hier ist eine einfache Aufteilung: Ich habe ein h: selectOneMenu mit einigen Elementen und dessen Wert an eine Backing-Bean angehängt. An dieses h angehängt: selectOneMenu ist ein a4j: support-Tag, so dass jedes Mal, wenn das Änderungsereignis ausgelöst wird, die Backing-Bean aktualisiert werden soll. Wirklich einfaches Zeug wie?

Wenn sich dieses h: selectOneMenu jedoch in einem Rich: ModalPanel befindet, aktualisiert das Ereignis onchange die Backing-Bean erst, wenn das Rich: ModalPanel geschlossen wird.

Ich kann dies bestätigen, weil ich es im Eclipse-Debug-Modus ausgeführt habe und ich habe einen Haltepunkt auf dem Setter der Eigenschaft, die an das h: selectOneMenu angeschlossen ist. Das macht mich verrückt! Das ist Vanilla-Zeug für Ajax, aber reich: ModalPanels scheinen es nicht zu erlauben.

Also, die Frage ist: kann ich Ajax Sachen in einem Rich: ModalPanel tun? Ich versuche im Grunde, das Rich: ModalPanel als Formular zu verwenden (ich habe a4j: form und h: form vergeblich versucht), das auf Änderungen des Dropdowns reagiert (zB wenn der Benutzer das Dropdown ändert, ein bestimmtes ein Teil des Formulars sollte erneut gesendet werden). Versuche ich etwas zu tun, was nicht möglich ist?

Hier ist eine vereinfachte Version des 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> 

Grüße, Andy

Answer 1

Es sollte funktionieren. Überprüfen Sie mit a4j: Protokollieren Sie, dass das aktualisierte Markup (das Sie erneut rendern) vom Server gesendet wird. Ich glaube nicht, dass es das Problem verursacht, aber Sie können ein paar Dinge in Ihrem Code ändern:

ajaxSubmit = true - Sie brauchen es nicht wirklich, wie Sie a4j verwenden: Unterstützung ajaxSingle = True und a4j: Region - ist das gleiche in Ihrem Fall limitToList = true - Sie brauchen es nicht, da Sie keine anderen Bereiche auf der Seite aktualisieren.

Answer 2

Versuchen Form außerhalb Ihres modalPanel Tag nehmen:

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

auch sicherstellen, dass Ihre "quickAddPaymentForm" ist

nicht verschachtelt

Answer 3

Verwendung <h:form>

und entfernen Sie folgende Attribute aus: ajaxSingle = "true ", sofort =" wahr "

Answer 4

Überprüfen Sie HTML-Optionen, die von f: selectItems oder s: selectItems generiert werden, keine nachgestellten Leerzeichen (vie w Seite Quelle von Browser):

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

Wenn ja, die Hinter weiße Flächen in Server-Side-Code entfernen,

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

Ich fand, dass die hinteren Räume Ajax Ereignis verhindern, Brennen, wenn a4j: Unterstützung und h: selectOneMenu funktioniert in einem rich: modalPanel, obwohl es außerhalb von rich: modalPanel gut funktioniert.Hier ist ein funktionierender Beispielcode:

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