Ajax – a4j:support within a rich:modalPanel

ajaxajax4jsfmodal-dialogrichfacesseam

I've hit a wall.
I know the a4j and rich tags pretty well (I use Seam 2.2.0 and Richfaces 3.3.1). However, I'm trying to do something quite simple, but in a rich:modalPanel.

It seems that rich:modalPanels do not allow Ajax events to be fired. Here's a simple breakdown:
I have a h:selectOneMenu with some items in it and whose value is attached to a backing bean. Attached to that h:selectOneMenu is a a4j:support tag so that whenever the change event is fired, the backing bean should get updated. Truly simple stuff eh?

However, when this h:selectOneMenu is in a rich:modalPanel the onchange event doesn't update the backing bean until the rich:modalPanel closes.

I can confirm this because I'm running it in Eclipse debug mode and I have a breakpoint on the setter of the property that's hooked up to the h:selectOneMenu.
This is driving me mad! This is vanilla stuff for Ajax, but rich:modalPanels don't seem to allow it.

So, the question is: can I do Ajax stuff within a rich:modalPanel? I'm basically trying to use the rich:modalPanel as a form (I've tried a4j:form and h:form to no avail) that reacts to changes to the drop down (e.g. when the user changes the drop down, a certain part of the form should get reRendered). Am I trying to do something that's not possible?

Here's a simplified version of the 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>

Regards,
Andy

Best Answer

use <h:form>

and remove following attributes from : ajaxSingle="true", immediate="true"

Related Solutions

Ajax – Two ajax updates with h:selectOneMenu f:ajax

UPDATE:

here is a working example:

Bean:

import java.util.ArrayList;

import javax.annotation.PostConstruct;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.event.AjaxBehaviorEvent;
import javax.faces.model.SelectItem;

@ManagedBean(name="myBean")
@SessionScoped
public class MyBean {

    private boolean bDisabled;
    private boolean cDisabled;

    private String selectedA;
    private String selectedB;
    private String selectedC;
    private ArrayList<SelectItem> aItems;
    private ArrayList<SelectItem> bItems;
    private ArrayList<SelectItem> cItems;

    public MyBean() {

    }

    @PostConstruct
    public void init(){
        try{            

            this.bDisabled = new Boolean(true);
            this.cDisabled = new Boolean(true);

            this.aItems = new ArrayList<SelectItem>();
            this.bItems = new ArrayList<SelectItem>();
            this.cItems = new ArrayList<SelectItem>();

            this.aItems.add(new SelectItem("NONE", "---?"));
            this.aItems.add(new SelectItem("A1", "A 1"));
            this.aItems.add(new SelectItem("A1", "A 1"));
            this.aItems.add(new SelectItem("A1", "A 1"));

            this.bItems.add(new SelectItem("NONE", "---?"));
            this.cItems.add(new SelectItem("NONE", "---?"));

        }catch(Exception e){
            e.printStackTrace();
        }
    }   

    public final void selectA(final AjaxBehaviorEvent event){
        try{
            System.out.println(this.selectedA);
            this.bItems.clear();
            this.bItems.add(new SelectItem("NONE", "---?"));
            if(this.selectedA.equals("NONE") ){
                this.setbDisabled(true);
                return;
            }
            this.bItems.add(new SelectItem("B1","B 1"));
            this.setbDisabled(false);
        }catch(Exception ex){
            ex.printStackTrace();
        }
    }

    public final void selectB(final AjaxBehaviorEvent event){
        try{
            System.out.println(this.selectedB);
            this.cItems.clear();
            this.cItems.add(new SelectItem("NONE", "---?"));
            if(this.selectedB.equals("NONE") ){
                this.setcDisabled(true);
                return;
            }           
            this.cItems.add(new SelectItem("C1","C 1"));
            this.setcDisabled(false);
        }catch(Exception ex){
            ex.printStackTrace();
        }
    }

    public final void selectC(final AjaxBehaviorEvent event){
        try{
            System.out.println(this.selectedC);
        }catch(Exception ex){
            ex.printStackTrace();
        }
    }

    public String getSelectedA() {
        return selectedA;
    }

    public void setSelectedA(String selectedA) {
        this.selectedA = selectedA;
    }

    public String getSelectedB() {
        return selectedB;
    }

    public void setSelectedB(String selectedB) {
        this.selectedB = selectedB;
    }

    public String getSelectedC() {
        return selectedC;
    }

    public void setSelectedC(String selectedC) {
        this.selectedC = selectedC;
    }

    public ArrayList<SelectItem> getaItems() {
        return aItems;
    }

    public void setaItems(ArrayList<SelectItem> aItems) {
        this.aItems = aItems;
    }

    public ArrayList<SelectItem> getbItems() {
        return bItems;
    }

    public void setbItems(ArrayList<SelectItem> bItems) {
        this.bItems = bItems;
    }

    public ArrayList<SelectItem> getcItems() {
        return cItems;
    }

    public void setcItems(ArrayList<SelectItem> cItems) {
        this.cItems = cItems;
    }

    public boolean isbDisabled() {
        return bDisabled;
    }

    public void setbDisabled(boolean bDisabled) {
        this.bDisabled = bDisabled;
    }

    public boolean iscDisabled() {
        return cDisabled;
    }

    public void setcDisabled(boolean cDisabled) {
        this.cDisabled = cDisabled;
    }

}

XHTML:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      >
<h:head>
    <meta charset="UTF-8" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>Test</title>    
</h:head>
<body>
<f:view> 
<h:form id="dataForm">
<h:selectOneMenu value="#{myBean.selectedA}" style="width: 100%;">
    <f:selectItems value="#{myBean.aItems}" /> 
    <f:ajax execute="@form" render="@form" listener="#{myBean.selectA}" />
</h:selectOneMenu>

<h:selectOneMenu disabled="#{myBean.bDisabled}" value="#{myBean.selectedB}" style="width: 100%;">
    <f:selectItems value="#{myBean.bItems}" /> 
    <f:ajax execute="@form" render="@form" listener="#{myBean.selectB}" />
</h:selectOneMenu>

<h:selectOneMenu disabled="#{myBean.cDisabled}" value="#{myBean.selectedC}" style="width: 100%;">
    <f:selectItems value="#{myBean.cItems}" /> 
    <f:ajax execute="@form" render="@form" listener="#{myBean.selectC}" />
</h:selectOneMenu>

</h:form>
</f:view>
</body>
</html>

Best Answer

Related Solutions

Ajax – Two ajax updates with h:selectOneMenu f:ajax

Related Topic