动态添加文本框的Ajax在PrimeFaces v3.5中不起作用

时间:2013-04-06 19:37:19

标签: jsf-2 primefaces

我的h:form包含p:selectOneMenu个组件,其中包含两个单值和多个值。 h:form还包含默认p:inputText。我的目标是仅在选择值倍数时添加多个p:inputText组件。请参阅随附的屏幕截图 - enter image description here

以下是我的观点,假设在点击图标按钮时发送ajax请求 -

<h:form>
    <p:panel header="Dynamically Add textbox">
        <p:selectOneMenu id="runType" value="#{repeateRun.runType}">
            <f:selectItems value="#{repeateRun.runList}" var="runType" itemLabel="#{runType}" itemValue="#{runType}" />
            <p:ajax update="outPanel" listener="#{repeateRun.renderComponent}" />
        </p:selectOneMenu>
        <h:panelGrid id="runList">
            <ui:repeat value="#{repeateRun.runs}" var="run">
                <p:inputText value="#{run.runValue}" />
            </ui:repeat>
        </h:panelGrid>
        <p:outputPanel id="outPanel">
            <p:commandButton update="runList" icon="ui-icon-plusthick" title="Add more" rendered="#{repeateRun.showAddButton}">
                <f:ajax render="runList" listener="#{repeateRun.addRun}" />
            </p:commandButton>
        </p:outputPanel>
    </p:panel>
</h:form>

@ViewScoped @ManagedBean RepeateRun正在关注 -

import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;
import javax.annotation.PostConstruct;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;
import javax.faces.event.ActionEvent;
@ManagedBean
@ViewScoped
public class RepeateRun implements Serializable {
    private static final long serialVersionUID = 1L;
    private List<String> runList;
    private List<Run> runs;
    private int runValue;
    private String runType;
    private boolean showAddButton = false;
    private static final String SINGLE = "Single";
    private static final String MULTIPLE = "Multiple";
    //Note : Getters Setters are removed while putting here
    @PostConstruct
    public void initBean() {
        this.setRunList(this.populateRunList());
        this.setRuns(this.populateRuns());
    }
    public void addRun() {
        if (this.runs == null) {
            this.setRuns(this.populateRuns());
        } else {
            this.runs.add(this.defaultRun());
        }
    }
    public void renderComponent() {
        if (this.getRunType().equals(SINGLE)) {
            this.setShowAddButton(false);
        } else {
            this.setShowAddButton(true);
        }
    }
    private List<String> populateRunList() {
        List<String> runList = new ArrayList<String>();
        runList.add(SINGLE);
        runList.add(MULTIPLE);
        return runList;
    }
    private Run defaultRun() {
        Run defaultRun = new Run();
        defaultRun.setRunValue(1);
        return defaultRun;
    }
    private List<Run> populateRuns() {
        List<Run> runs = new ArrayList<Run>();
        runs.add(this.defaultRun());
        return runs;
    }
}

因此,在f:selectItems中选择多个值后,加号图标按钮出现,但该按钮未调用附加方法,即addRun。要在点击后确认方法addRun,我会在sysout方法中添加一些addRun语句。我看到sysout没有被冲洗。与此同时,我在萤火虫中看到了一些xml响应。
问题在哪里?

1 个答案:

答案 0 :(得分:2)

问题在于f:ajaxp:commandButton不兼容。以下是罪魁祸首 -

<p:commandButton update="runList" icon="ui-icon-plusthick" title="Add more" rendered="#{repeateRun.showAddButton}">
     <f:ajax render="runList" listener="#{repeateRun.addRun}" />
</p:commandButton>

以上行应替换为以下行

<p:commandButton actionListener="#{repeateRun.addRun}" update="runList" icon="ui-icon-plusthick" title="Add more" rendered="#{repeateRun.showAddButton}" />