javascript - 使用 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 函数，将其传递给支持 bean 函数并做事，我应该做什么？显然我无法像以前那样触发命令按钮，因为我无法传递这样的参数

示例:

        <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 setter 也不会被触发，并且值为 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