Trigger a commandButton action with variable passed by javascript in JSF

Question

I am trying to make an Ajax call from my .xhtml page to my backing ManagedBean function as shown below:

.xhtml form code

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

managed bean's function code

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

The above code works fine since each and every time i trigger the commandButton, a new "Cell" object is added into the list and rendered asynchronously in my form.

I trigger the commandButton from javascript using the tricky way (which is does not seem to me the best option)

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

What I want to achieve now is do something similar but with cellBean.children function having parameters (f.e a list of Strings), pass it to the backing bean function and do stuff, what should I do? Obviously I cannot trigger the commandButton as I did previously because I cannot pass parameters like that

Example:

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

Thanks In advance.

=============== UPDATE ==================

Following this example what I have tried so far is:

.xhtml form

 <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 code

  // 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();

Managed Bean

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

Unfortunately, even the values of the inputHidden fields are set, the backing bean setters are not triggered and the values are null

Did you try something? Where should the parameter content com from? Possibly these QAs help: Passing parameter to JSF action or How to pass JavaScript variables as parameters to JSF action method? — Selaron
The parameter content is already in a javascript variable, resources seem very helpful, will have a look at them thanks — NickAth
Hi @Selaron , I have followed the example you provided me with in the comments section but is not working as expected, could you please check my updated question? — NickAth
And the action method IS called? Did ypu debug the http request? Are the values there? What if you (for testing) make then none-hidden? — Kukeltje
Possible duplicate of commandButton/commandLink/ajax action/listener method not invoked or input value not set/updated #9 in there — Kukeltje

NickAth NickAth · Accepted Answer · 2019-05-07T16:10:26

All I had to do is add the execute parameter in the tag (following this tutorial). Now the setters are called and the backing beans take the values I want

.xhtml code

<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 code

    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

Trigger a commandButton action with variable passed by javascript in JSF

1 Answers