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](https://stackoverflow.com/questions/7401771/passing-parameter-to-jsf-action) or [How to pass JavaScript variables as parameters to JSF action method?](https://stackoverflow.com/questions/28591301/how-to-pass-javascript-variables-as-parameters-to-jsf-action-method) — Selaron, Apr 25 '19 at 12:24
The parameter content is already in a javascript variable, resources seem very helpful, will have a look at them thanks — NickAth, Apr 25 '19 at 12:47
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, May 07 '19 at 15:02
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, May 07 '19 at 15:44
@Kukeltje Yes the action method is called. I debugged the http request and I see the code calling the `getChildCellsStr()` and `getParentCellsStr()` getters but the values are null, the code does not go to the setters of the variables. I made the fields visible (h:inputText) and when the javascript function is called I see the value set into them, but the behaviour still remains the same :/ — NickAth, May 07 '19 at 15:53
Possible duplicate of [commandButton/commandLink/ajax action/listener method not invoked or input value not set/updated](https://stackoverflow.com/questions/2118656/commandbutton-commandlink-ajax-action-listener-method-not-invoked-or-input-value) #9 in there — Kukeltje, May 07 '19 at 16:30

score 0 · Accepted Answer · edited May 07 '19 at 16:32

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

So #9 in https://stackoverflow.com/questions/2118656/commandbutton-commandlink-ajax-action-listener-method-not-invoked-or-input-value — Kukeltje, May 07 '19 at 16:31
Thank you @Kukeltje for your responses, your post seems very helpful :) — NickAth, May 07 '19 at 16:33
All >15 upvoted Q or A in jsf are helpful. Search for them (sort on votes) and read them and remember their existence. Most 'issues' you can encounter with jsf have been asked and answered since it is a mature technology — Kukeltje, May 07 '19 at 16:50

Trigger a commandButton action with variable passed by javascript in JSF

1 Answers1