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

【问题标题】：Ajax dynamically adding textbox is not working in PrimeFaces v3.5Ajax 动态添加文本框在 PrimeFaces v3.5 中不起作用
【发布时间】：2013-04-06 19:37:18
【问题描述】：

我的h:form 包含一个p:selectOneMenu 组件，它有两个值single 和multiple。 h:form 还包含一个默认的p:inputText。我的目标是仅在选择值倍数时添加多个 p:inputText 组件。请参阅随附的屏幕截图-

以下是我的视图，假设点击图标按钮时发送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@ManagedBeanRepeateRun 正在关注-

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 中选择值 Multiple 后，加号图标按钮出现，但该按钮未调用附加方法，即 addRun。为了确认点击后调用addRun方法，我在addRun方法中放了一些sysout语句。我看到sysout 没有刷新。同时我在萤火虫中看到了一些xml 的回复。
问题出在哪里？

【问题讨论】：

你忘了说到底是什么问题。到底发生了什么（不是）？
点击图标按钮时是否执行addRun方法？
@Laabidi：根据到目前为止发布的代码，它不会，只要它被渲染，但 OP 对具体问题并不完全清楚。
@BalusC，没有得到你的评论，“它不会，只要它被渲染了”。我想，可能是该方法运行，但问题出在“渲染”部分，注意到 OP 没有在表单中使用 prependId="false"
@Laabidi: <f:ajax> 不适用于 PF 组件。

标签： jsf-2 primefaces

【解决方案1】：

问题在于f:ajax，它不适用于p: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}" />

【讨论】：