Using JSF AJAX methods to keep JavaScript module scope

Question

I am working with the application, which has JSF2 framework. The idea of that framework is to manage connection between Backend (Java) and Frontend.

I know, that JSF version we are using creates jsf.ajax object in a DOM, which holds several methods for performing passing and getting data.

And so, as I am building Frontend architecture based on modules pattern which has private scope each. Inside several modules I need to make AJAX call to get some data from Backend, but if I am using standart way of JSF by calling a4j:jsFunction (previously created), I am loosing the scope of my JavaScript module immediately. And, of course, can not return back to the module.

Therefore, I am asking is that possible to archive something similar to jQuery.ajax() method by using jsf.ajax object and its methods (request/reponse)?!

jQuery.ajax({
  url: "", // I don't have url as in PHP, I have JSF action listener #{method.function}
  data: { param: 'value' }, // params for method.function
  success: function(data){
    // yes I need to receive the data from Backend (maybe #{bean} or JSON)
  }
});

I strongly believe, there's a way to use JSF and AJAX for Java (A4J) to archive my need by keeping a scope of JavaScript module, without going out of that when making AJAX calls.

Answer 1

If you need an ajax component to post/retrieve arbitrary data from the server then I don't think jsf.ajax is the right tool for you. It is strictly coupled to the JSF presentation and can be used to invoke the server logic and render parts of the html page. The response will be an XML with partial-updates. Below I will describe how to bend it towards your purpose but it won't be intended application of this api.

In short this would have to be called like:

jsf.ajax.request(<DOM_node>, event, {render: "<rendered_id>", execute: "@this"})

Where DOM_node is element which has an action listener, event is JS event of type supported by the listener (if you use jsf.ajax.request as onclick then just "event" variable will be available and you can pass it as is). <rendered_id> should be client id of JSF component surrounding the script you want to execute as a callback.

The resulting call should ask JSF to execute action listener attached to component corresponding to DOM_node (like commandLink) and rerender area contained within component with <rendered_id>. If it contains html <script> tag, this script will be executed. It can contain your JSON data and function calls.

Here is a link to the docs.