Access Javascript Variables from JSF

Question

I have a JSF file that needs to be populated from the data that I get from the JS function that I get from an Ajax call to a web service. The last part works like a charm. I can get JSON data from ajax call. I need to parse this json data and take the data and use it to populate JSF. I am not sure how to access JS variables from JSF / xhtml.

Is there any way to do this? I was going through a DWR material that would send an ajax message from JS to a Java bean, and I could use the bean variable from JSF. But I want to know if there is another way to do this.

I would really appreciate any help. I am using JSF 2.x by the way.

Thanks, S.

Answer 1

You can use the following “hack” to force JS to send information to JSF.

Create an invisible JSF form using <f:ajax> hook:

 <h:form prependId="false" style="display:none;"> <h:inputText id="input" value="#{bean.input}"> <f:ajax event="change" execute="@form" listener="#{bean.process}" render=":something" /> </h:inputText> </h:form> 

Let JS update the input field and fire the change event:

 <script> function somefunction() { var input = document.getElementById('input'); input.value = 'your JSON string'; input.onchange(); } </script> 

Running a Java / JSF job in the listener method:

 private String input; // +getter +setter public void process(AjaxBehaviourEvent event) { doSomethingWith(input); } 

Put the desired JSF markup in <h:someComponent id="something"> , which will be re-displayed <f:ajax render=":something"> when the listener completes its task:

 <h:panelGroup id="something"> The JSON string was: <h:outputText value="${bean.input}" /> </h:panelGroup> 

---

However, I would prefer to make the webservice call in the constructor or managed bean action method, rather than in JS. Your approach is literally devious.

Answer 2

I think that this is impossible.

• JSF runs on the server.
• JavaScript works on the client (browser).

So, JSF starts before the action in JS.

Of course, you can make a servlet that will be called from JavaScript by retrieving the information stored in JavaScript variables. But this will be in the next step:

• JSF builds page
• WebService JavaScript call, getting JSON data
• JavaScript sends JSON data to the server (servlet)

Answer 3

You can revise the design a bit and perhaps do what you are looking for. Instead of accessing the web service via ajax on the client, you can access it on the server side by contacting it directly in the action method or the method that occurs before creating the view (actions with surfaces handle this kind of work beautifully). Then you can build your view dynamically based on the results of the web service response.

I am not 100% sure that it will fulfill what you are looking for, but this general idea can work for what sounds like you are walking.

If you have already visualized the presentation and want to do it with ajax, you can use f: ajax with the same principle - the strike action method, exchange information with the web server server in this action method, change the state of the variables that determine the layout of the view and display answer.