How to use jsf.ajax.request to manually send ajax request in JSF

Question

I have a table and each row has the 'onclick' configured to call a js function - this part works. I would like the function to issue an ajax request to a method that I can somehow define. Upon return, a div below the table should be rendered. Is this possible? I tried the JS function with the code:

<h:outputScript library="javax.faces" name="jsf.js" />
...
function clickAndRender() {
  jsf.ajax.request(this, event, {render: 'div-to-render'})
}

But it doesn't work of course. I have no idea what the values of the 'source' parameter (the code above uses 'this') should be, neither do I know what execute in the last parameter should be set to. I also don't know how to define the url to be called and the 'action' method.

The solution could also be using some invisible form somewhere else in the page that get's submitted by the click. Can anybody help?

Answer 1

As per JSF 2.3, you can use <h:commandScript> for this. See also spec issue 613.

<h:form>
    <h:commandScript name="foo" action="#{bean.action}" render="div-to-render" />
</h:form>

function clickAndRender() {
    foo();
}

It's available since Mojarra 2.3.0-m06.

---

^{This answer was updated as above 3 years after the question was posted. Below is the original answer when which dates back when <h:commandScript> didn't exist.}

---

I have no idea what the values of the 'source' parameter (the code above uses 'this') should be

It should be the client ID of the UICommand component which you'd like to invoke, e.g. <h:commandLink>, <h:commandButton>, etc as provided by standard JSF API. This way JSF will during apply request values phase be able to locate the desired component in the component tree and then queue all of the action(listener)s registered on it.

---

neither do I know what execute in the last parameter should be set to.

It should be the space-separated client IDs of the components which you'd like to process during the form submit. It's exactly the same as you'd normally use in <f:ajax execute>.

---

I also don't know how to define the url to be called

Just the current page, as derived from the <form> which is been generated by the <h:form> where the UICommand component is nested in. But you don't need to specify it in jsf.ajax.request(). The jsf.js will already determine it based on the client ID of the UICommand component.

---

and the 'action' method.

Just specify the action or actionListener attribute of the target UICommand component the usual way.

---

All with all, your concrete problem is likely that you don't have any UICommand component in the view, so you can't use jsf.ajax.request(). One way would be to have a form with a command component which is hidden by CSS display:none:

<h:form id="foo" style="display:none">
    <h:commandLink id="bar" action="#{bean.method}" />
</h:form>

Then you can use foo:bar as source parameter.

jsf.ajax.request('foo:bar', null, {'javax.faces.behavior.event': 'action', 'execute': '@form', 'render': 'div-to-render'});

The above does effectively the same as <f:ajax execute="@form" render="div-to-render"> in the command component. You could alternatively also go this path and then use document.getElementById("foo:bar").click() instead of jsf.ajax.request().

Alternatively, you can also create a custom UICommand component which makes it all a bit easier for JavaScript users. The JSF utility library OmniFaces has such a component, the <o:commandScript>. See also its showcase page and source code. The JSF component library PrimeFaces has also a similar component in flavor of <p:remoteCommand>. See also its showcase page. RichFaces has a <a4j:jsFunction> which does the same. See also its showcase page.