JSF page uses the JS function to callback the background bean method and get the return value of the method

Because primefaces in the domestic use is not too much, therefore, the domestic JSF system, detailed introduction of the information is very few, even if there is some information, is only a simple translation of foreign materials or just superficial phenomenon (fur only), their statements are even wrong, it is likely to mislead users.

Relatively speaking, those who look at the domestic only translated articles or books than directly to see the official documents or materials abroad, in the JSF page I tell how to use JS call back to the background bean method, the first to tell you a few foreign data. On the official website of primefaces, you can search for almost all the things you need, Primefaces website is: http://www.primefaces.org/showcase/index.xhtml if feel their English bad children's shoes, can go to primefaces domestic mirror website to consult the material: http://www.primefaces.cn/, just the domestic this website is translating, some things still not perfect; If you want to know Primefaces's friends carefully, can also download Primefaces official documents, the latest official documents for 5.2, all in English, I am here to provide you with my download good primefaces official documents: Http://pan.baidu.com/s/1mg3i9Ry, In this document you can assemble a lot of interesting things by their examples.

OK, next into the text.

In some cases, when developing a JSF project, we need to use HTML components to achieve some of the goals that are not achievable with JSF components. For example, sometimes we want to trigger a background method or even receive a return value from a background method when some HTML component or tag is triggered. This time we have a headache, because primefaces did not tell us how to use JS to invoke the background bean method. Then, we need to combine JS and JSF at the same time to achieve this goal.

There are two ways to achieve this.

1 using JSF's Inputhidden tags

This is hardly a real way to call the background of JS, because it cannot carry the value back to the bean, but the simple background to the page to pass the data can use this method

<id=value="#{advancedquerymanager.aliacolums}" ></h:inputhidden>  

First, when a component is triggered in JSF, update the Inputhidden tag in a timely manner, such as the following component

<P:selectonemenuId="Module"Value="#{advancedquerymanager.selectedmodule}" ><F:selectitemitemlabel= "----" itemValue=< Span class= "Hljs-value" "" "/> <f:selectitems value=" #{advancedquerymanager.allmodule} "/> p:ajax event= "change" update= "input" oncomplete= "Getvlue ()" listener= "#{ Advancedquerymanager.onmodulechange ()} "></p:ajax>< Span class= "Hljs-tag" ></P:SELECTONEMENU>       

The component will trigger the back-end method when the drop-down value changes.

Onmodulechange ()

When the method finishes, it will update (refresh) this

H:Inputhidden

If the value in your Inputhidden is changed and changed with the drop-down, then you can get the value in this inputhidden in any JS function, and then handle it,

Getvlue() {/    * document.getElementById ("commbtn"). onclick; */    alert (document.getElementById ( eval (")"); Addqueryroot (true);}     

My inputhidden here is a JSON-formatted string, and I can dynamically get this JSON through the JS function, and then do the other things. Of course, you can call this JS function in any HTML tag and get the JSON string.

2 using CommandButton to achieve complex asynchronous flush values

Here, the ordinary HTML tag combined with the JS function CommandButton can achieve what effect? That is, when you trigger any HTML tag, you can use this CommandButton component to pass the value you selected in the HTML tag to the background, after the background bean processing, it will return the processing result, the JS function can receive this processing result, The result is then integrated into the other components.

First, to create this hidden CommandButton, note that this CommandButton itself does not have a hidden property and can be wrapped by other components that have hidden properties to achieve the hidden purpose, which I achieve through a div. In this CommandButton, we find that the action is to invoke the background method when the CommandButton is clicked, and the role of the Name property and the Value property in attribute will be below.

<DivId="Hiddenform"style="Display:none;" ><P:commandbuttonid= "command" actionListener=  "#{advancedquerymanager.testreturn}" oncomplete= "Handlecomplete (xhr, status, args)" > <f: Attribute name= "attrname1"  Value= "Liu"/> <f:attribute name= "attrname2" value= "bei"/> </p:commandbutton> </DIV>         

Then we need an ordinary HTML tag, just an example of an ordinary HTML button:

type="button" value="callback testing" onclick="test ()"/>  

Then write a JS function to connect the common button and JSF components CommandButton

Test() {    $ (' #command '). Click ();} 

This function means that when you click on the "Callback Test" button, it is equivalent to the Cimmandbutton button that triggers the JSF, when two of the CommandButton

<f:attribute name=value="Liu"/> 

The two attributes are automatically bound to a map-like data, and the value of the Name property as the value in the Key,value as the values in the map, they will be passed to the background.

Then a method is required in the background bean to receive two values:

public  void testreturn (ActionEvent event) {String attrvalue1 = (string) event.getcomponent (). GetAttributes (). get (event.getcomponent (). GetAttributes ().  Get ( "attrname2"); System. out.println (attrvalue1); System. out.println (attrvalue2); RequestContext RequestContext = Requestcontext.getcurrentinstance (); Requestcontext.addcallbackparam ( "IsValid", true);}   

In the above code, we can see that the Java program has successfully received the front-end page passed over the value, and it finally returned a class is the value of the map format, key is: Isvalid,value: True

Finally, we want to write how the page receives the values passed in the background:

<type="Text/javascript" >    handlecompletevar isValid = args.isvalid; alert (isValid ); }</script>      

Next, you will find that not only the background can print out the front page of the two values, while the front-end of the JS function can also print out the background of the value, of course, the same, from the front-end to the background value of the number and form, you can change, while the data received from the background, you can do anything.

However, please note that this

P:CommandButton

The problem with components is that you cannot dynamically assign values to this component through the JS function, but the values in this component can accept the property values in the background

<f:attribute name="attrname1" value="#{bean.val}"/>   

This actually did not achieve the purpose that we want to pass JS to the background bean, the next method, we can completely achieve through the JS dynamic transfer value to the background bean method, the Bean method to process the return data to JS.

3 using P:remotecommand to achieve complex asynchronous flush values

Please note that this method can really solve the problem of invoking the background bean method through JS in JSF and getting the return value of the Bean method.

Again, first we're going to write two JSF components to combine with a background bean.

<h:inputhidden id=" input1 "value=" #{advancedquerymanager.vals} " ></h:inputhidden><h:form> <p:remotecommand name=" processselection "action= "#{advancedquerymanager.testreturn}" update= oncomplete= " Processresult (); "/></H:FORM>     

To explain, the inputhidden of the above function is to receive the return value after the background bean is processed. The function of Remotecommand is to pass the dynamic value in JS to the background bean method.

<script>    processresult//receive the processing result passed in the background bean method, the receiving method is to obtain the value in the Inputhidden, and can continue processing according to their own business Alert ($ (makeselection' Getit '}]);} /script>     

JS function using the method in the code, who does not understand can again ai me, here no longer explain.

Finally, the background Bean method code:

Testreturn() {        String SelectedValue = Facescontext.getcurrentinstance (). Getexternalcontext (). Getrequestparametermap (). get ("Setval"); System. out.println ("GetResult";}    

At this point, using the JS function in JSF to dynamically pass the value of the normal HTML component to the background bean method and accept the background processing result has been successfully resolved.

JSF page uses the JS function to callback the background bean method and get the return value of the method