使用JSF中的javascript传递的变量触发commandButton动作

Question

我正在尝试从我的 .xhtml 页面向我的支持 ManagedBean 函数发起 Ajax 调用，如下所示：

.xhtml 表单代码

            <h:form id = "jsfform">
                <h:commandButton id="button" action="#{cellBean.children()}">
                    <f:ajax render=":results" />
                </h:commandButton> </h:form>
            <h:panelGroup id="results">
                <th>Child cells</th>
                <td>
                <ui:repeat value="#{cellBean.childCells}" var="cell">
                        <tr>#{cell.cellName}</tr>
                </ui:repeat>
                </td>
            </h:panelGroup>

托管 bean 的功能代码

 public List<Cell> children(){
    this.childCells.add(new Cell("cell1"));
    return this.childCells;
}

上面的代码工作正常，因为每次我触发命令按钮时，都会将一个新的“Cell”对象添加到列表中并在我的表单中异步呈现。

我使用棘手的方式从javascript触发commandButton（在我看来这不是最好的选择）

document.getElementById('jsfform:button').onclick();

我现在想要实现的目标是做一些类似的事情，但 cellBean.children 函数有参数（fe 一个字符串列表），将它传递给支持 bean 函数并做一些事情，我应该怎么做做？显然我不能像以前那样触发 commandButton，因为我不能传递这样的参数

例子：

        <h:form id = "jsfform">
            <h:commandButton id="button" action="#{cellBean.children(a_list)}">
                <f:ajax render=":results" />
            </h:commandButton> </h:form>
        <h:panelGroup id="results">
            <th>Child cells</th>
            <td>
            <ui:repeat value="#{cellBean.childCells}" var="cell">
                    <tr>#{cell.cellName}</tr>
            </ui:repeat>
            </td>
        </h:panelGroup>


public List<Cell> children(List<String> alist){
    this.childCells.add(new Cell("cell1"));
    return this.childCells;
}

提前致谢。

=============== 更新 ==================

按照example 到目前为止我所尝试的是：

.xhtml 表单

 <h:form id = "jsfform">
                <h:inputHidden id="childCells" value="#{cellBean.childCellsStr}" />
                <h:inputHidden id="parentCells" value="#{cellBean.parentCellsStr}" />
                <h:commandButton id="button"  style="display: none" action="#{cellBean.children()}">
                    <f:actionListener binding="#{cellBean.checkBtnDisable()}" /> 
                    <f:ajax render=":ajaxform"/>
                </h:commandButton>

Javascript 代码

  // json1 && json2 are two json strings
document.getElementById('jsfform:childCells').value = json1;
document.getElementById('jsfform:parentCells').value = json2;
//trigger the button of the form with javascript
document.getElementById('jsfform:button').onclick();

托管 Bean

private String childCellsStr;
private String parentCellsStr;
//getters && setters

不幸的是，即使设置了 inputHidden 字段的值，支持 bean 设置器也没有被触发并且值为 null

Answer 1

我所要做的就是在标签中添加execute 参数（在this tutorial 之后）。 现在调用了 setter 并且支持 bean 采用了我想要的值

.xhtml 代码

<h:form id = "jsfform">
                <h:inputHidden id="childCells" value="#{cellBean.childCellsStr}" />
                <h:inputHidden id="parentCells" value="#{cellBean.parentCellsStr}" />
                <h:commandButton id="button"  style="display: none" action="#{cellBean.children()}">
                    <f:actionListener binding="#{cellBean.checkBtnDisable()}" /> <!--first call the children function, then call the checkBtnDisable -->
                    <f:ajax execute="childCells parentCells" render=":ajaxform"/>
                </h:commandButton>
            </h:form>

Javascript 代码

    document.getElementById('jsfform:childCells').value = json1;
document.getElementById('jsfform:parentCells').value = json2;
//trigger the button of the form with javascript
document.getElementById('jsfform:button').onclick();

Java Bean

private String childCellsStr;
private String parentCellsStr;
//getters && setters