Question

Whats the easiest way to toggle the rendering of a JSF Component based on a javascript flag?
I want to display certain things based on whether the user has HTML5 enabled…e.g. geolocation, native date picker etc.

Thanks,D

Answer 1

This answer assume that you know how to use javascript to check if the user has HTML5 enabled. Here is the idea. The one way for javascript to communicate with JSF server managed bean is to have the javascript invoke a click event on a hidden commandButton. So here is how you do it. This command button can then invoke function on your backing bean, like set a flag for display certain component on your page. For ajax request, you can use PrimeFaces p:commandButton with update attribute to do partial update.

1. Have hidden form on your page with a inputText and a p:commandButton
2. Determine if user is HTML5 enable using javascript, then invoke a click event on the commandButton. The inputText is there so that you can pass a flag back to the server.

For example:

<h:form style="display:none">
    <h:inputText id="flag" value="#{myBean.flag}"/>
    <p:commandButton id="button" actionListener="#{myBean.process}" update="..."/>
</h:form>

so your jQuery would look like this

 if(user is HTML5 enabled){
      jQuery("#flag").val("Flag that let you know user has HTML5 enable.")
      jQuery("#button").click();
 }else{
     //Same thing as above but passing a flag that you know user dont have HTML5 enabled
 }

In your managed bean you would have

@ManagedBean
@RequestScoped
public class MyBean{
    private String flag;
    private boolean display;
    //setter and getter for `flag` and `display`

    public void process(){
        if(flag.equals("HTML5")){
            display = true;
        }else{
            display = false;
        }
    }
}