使用 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;
}

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

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

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

我现在想要实现的 是做一些类似的事情，但是 cellBean.children 函数有参数（f.e 一个字符串列表），将它传递给支持 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;
}

提前致谢。

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

按照这个到目前为止我已经尝试过的是：

.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 字段的值，backing bean setters 也没有被触发并且值为 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>

Java脚本代码

    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豆子

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

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

Trigger a commandButton action with variable passed by javascript in JSF

javascript

java

ajax

jsf

primefaces