Use js function calls the background method in the JSF, and obtain the return value of the background bean

Question

I have to use HTML component in the JSF page, such as drop-down components.I want to achieve this goal: when I click on the drop-down, the selected value will be passed to the method of a background bean, then receives results of this method processing , and can receive value passed to the other js function.

Why do you have to use a plain HTML `` instead of using the standard JSF `` which renders a corresponding HTML `` in turn? I would be better for someone else to understand the question thoroughly, if you demonstrated the phenomenon with a shortest possible example - in favour of [MCVE](http://stackoverflow.com/help/mcve). — Tiny, Apr 22 '15 at 03:04
I want to do a queryBuilder module in my web project, JSF components are not a good way to achieve this goal. — 郭鹏飞, Apr 22 '15 at 03:17
I need to use has the very good flexibility and operability of the component, if use primefaces components, it will become very complex, but use HTML tags/component, is not very complicated. — 郭鹏飞, Apr 22 '15 at 06:23
I have no clue what you actually mean by your last statement. — Kukeltje, Apr 22 '15 at 15:27

score 1 · Accepted Answer · edited May 23 '17 at 12:14

Ok, it's not trivial and you will lost a beauty of JSF but it's possible. I will give you direction how you can achieve these by using a PrimeFaces libary and <p:remoteCommand> component:

To call JSF bean method from javascript you can use Primefaces's <p:remoteCommand/>, for example:

<script>
   function processResult(){
       //...grab result from hidden-result field by JavaScript or jQuery
   }


    function makeSelection(){
    //...code to get selected value via javascript or jQuery

       processSelection([{name:'selected', value:'<selected value>'}]);
    }
</script>
<p:remoteCommand name="processSelection" action="#{bean.processSelected}" update="hidden-result" oncomplete="processResult();" />



 <h:outputText id="hidden-result" value="#{bean.result}" style="display:none;"/>

You call JavaScript function makeSelection which take selected value and pass it to the bean. Then it updates field with id='hidden-result' and when completed it will call function processResult where you should grab value from this field' by JavaScript or by jQuery use it whatever you want.

To receive these parameters in a backing bean you should use the following code:

public void processSelected() {
    String selectedValue = FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap().get("param");  
   //... make whatever you want with the selected value
   result = "Result from process by JSON or plain text";
}

At the beginning you get the passed parameter, then make your process and apply result to result value parameter which connected to <h:outputText/>

Please pay attention that I didn't check this code and it might contain a typo

Also I recommend you to take a look at this questions:

It mainly works, a small review is to get a hidden span with display:none instead of display:hidden: — Richard P., Aug 27 '15 at 10:37

Use js function calls the background method in the JSF, and obtain the return value of the background bean

1 Answers1