Question

Is it possible to trigger jsf <f:ajax render> inside an jQuery?

For example something like this:

/* if component Y changes
    trigger render event on component Y */

$("#source_compoment").bind("change", function(e) {
    $("#target_component").trigger("render");
});

Or with other words is there an equivalent for “f:ajax render” within jQuery?

Answer 1

Yes , make a hidden button

<h:commandButton id="myHiddenButtonID" value="RenderSomething" style="display:none">
    <f:ajax render="target_component"></f:ajax>
</h:commandButton>

and click it from js

$("#myHiddenButtonID").click();

in your specific case it will look like this:

$("#source_compoment").bind("change", function(e) {
    $("#myHiddenButtonID").click();
});

b.t.w there is no “equivalent for “f:ajax render” within jQuery” you simple use jquery to click a hidden JSF button.

---

Edit

In case a third party JSF Library usage is relevant you can use the

Primefaces RemoteCommand – (use update attribute)

or

Richfaces/ a4j:jsFunction – (use reRender attribute)