I want to perform an Ajax call from my .xhtml page to my ManagedBean function. Here is the code snippet of what I am trying to achieve:
.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 implementation works well, where a new "Cell" object is added to the list and rendered asynchronously whenever the commandButton is triggered.
In my next step, I aim to modify the cellBean.children function to take parameters (for example, a list of Strings), pass it to the backing bean function, and execute operations. However, I cannot trigger the commandButton in the same way as before due to the inability to pass parameters like that.
For 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;
}
Thank you for any insight or recommendations on how to accomplish this task effectively.
=============== UPDATE ==================
Based on this example, I have attempted the following approach:
.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
Despite setting values for the inputHidden fields, unfortunately, the backing bean setters do not get triggered, resulting in null values.