JSF selectbooleancheckbox validation

Question

I have modules list with four checkbooks (View, Create,Edit and Delete). In that, if user click on Create check box or edit check box or delete check box want to checked view check box automatically and same, if uncheck view check box want to uncheck create.Edit and Delete automatically. Please help me to solve this issue as i'm new to JSF. thanks in advance

Regards Mohan

                        <p:column headerText="Module ID:">
                            <h:outputText value="#{modules.moduleID}" />
                        </p:column> 



                        <p:column headerText="Root Module ID:">
                            <h:outputText value="#{modules.rootID}" />
                        </p:column>
                        <p:column headerText="Module Description:">
                            <h:outputText value="#{modules.moduleDescription}" />
                            </p:column>
                            <p:column headerText="View" >
                                <h:selectBooleanCheckbox id="vi" value="#{roleModule.view[modules.moduleID]}"/>
                            </p:column>
                            <p:column headerText="Create" >
                                <h:selectBooleanCheckbox value="#{roleModule.create[modules.moduleID]}">
                                <p:ajax update="vi"  listener="#{roleModule.permissionCheck}"/>
                                </h:selectBooleanCheckbox>

                            </p:column>
                            <p:column headerText="Edit" >
                                <h:selectBooleanCheckbox value="#{roleModule.edit[modules.moduleID]}">
                                <p:ajax update="vi"  listener="#{roleModule.permissionCheck}"/>
                                </h:selectBooleanCheckbox>
                            </p:column>
                            <p:column headerText="Delete" >
                                <h:selectBooleanCheckbox value="#{roleModule.delete[modules.moduleID]}">
                                <p:ajax update="vi"  listener="#{roleModule.permissionCheck}"/>
                                </h:selectBooleanCheckbox>
                            </p:column>

                    </p:dataTable>

Answer 1

I would do it in jQuery, for one reason, it's so basic move to take it into server-side level, after all the unchecking and checking is done on the view.

JS

      $(PrimeFaces.escapeClientId('form:table'))
        .on("change",
                "input[type='checkbox'][name*='edit'], input[type='checkbox'][name*='create'], input[type='checkbox'][name*='delete']",
                function() {
                    var tr = $(this).parent().parent();
                    var view = tr
                            .find("input[type='checkbox'][name*='view']");
                    var create = tr
                            .find("input[type='checkbox'][name*='create']");
                    var edit = tr
                            .find("input[type='checkbox'][name*='edit']");
                    var deleteBox = tr
                            .find("input[type='checkbox'][name*='delete']");
                    if ($(this).is(':checked')) {
                        view.prop("checked", true);
                    } else {
                        if (create.is(':checked') || edit.is(':checked')
                                || deleteBox.is(':checked')) {
                            view.prop("checked", true);
                        } else
                            view.prop("checked", false);
                    }
                });

    $(PrimeFaces.escapeClientId('form:table')).on(
        "change",
        "input[type='checkbox'][name*='view']",
        function() {
            var tr = $(this).parent().parent();
            var view = tr.find("input[type='checkbox'][name*='view']");
            var create = tr.find("input[type='checkbox'][name*='create']");
            var edit = tr.find("input[type='checkbox'][name*='edit']");
            var deleteBox = tr
                    .find("input[type='checkbox'][name*='delete']");
            if ($(this).is(':not(:checked)')) {
                create.prop("checked", false);
                edit.prop("checked", false);
                deleteBox.prop("checked", false);
            } 
        });

Please Note: if you update the table, you should rerun the script or you could replace the selector with the form id only. like this

$(PrimeFaces.escapeClientId('form')).on ....

of course you should include the code in the $( document ).ready() .

---

EDIT: BASED ON YOUR REQUEST.

I have created a small project on github , you can download the project and see how jQuery (JS in general) works with JSF, and here's a live demo .

Two main files are main.xhml and checkBoxesJQuery.js .

Hope it helps.

Answer 2

Try this, This may help you JSF Code:

<h:selectBooleanCheckbox value="#{bean.viewChecked}" >
    <a4j:support action="#{bean.viewCheckBoxAction}" event="onclick" reRender="panelId"/>
</h:selectBooleanCheckbox>
<h:outputText value="View" />

<h:selectBooleanCheckbox value="#{bean.createChecked}" >
    <a4j:support action="#{bean.createCheckBoxAction}" event="onclick" reRender="panelId"/>
 </h:selectBooleanCheckbox>
 <h:outputText value="Create" />

 <h:selectBooleanCheckbox value="#{bean.editChecked}" >
     <a4j:support action="#{bean.editCheckBoxAction}" event="onclick" reRender="panelId"/>
 </h:selectBooleanCheckbox>
 <h:outputText value="Edit" />

 <h:selectBooleanCheckbox value="#{bean.deleteChecked}" >
    <a4j:support action="#{bean.deleteCheckBoxAction}" event="onclick" reRender="panelId"/>
 </h:selectBooleanCheckbox>
 <h:outputText value="Delete" />

Bean Code:

public String viewCheckBoxAction()
    {
        if(!viewChecked) // while view is unchecked then uncheck all the others
        {
            editChecked = false;
            deleteChecked = false;
            createChecked = false;
        }

        return null;
    }


    public String createCheckBoxAction()
    {
        viewCheckManage();
        return null;
    }


    public String editCheckBoxAction()
    {
        viewCheckManage();
        return null;
    }


    public String deleteCheckBoxAction()
    {
        viewCheckManage();
        return null;
    }

    private void viewCheckManage() 
    {
        if(createChecked || deleteChecked || editChecked) // while any one is checked then view also checked
        {
            viewChecked = true;
        }
        else
        {
            viewChecked = false;
        }
    }

Answer 3

You may try something like this

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui"
    xmlns:pe="http://primefaces.org/ui/extensions">
<h:head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Test</title>
</h:head>
<h:body>

    <h:form id="form">
    <p:dataTable value="#{roleModule.modulesList}" var="module" id="table">
        <p:column headerText="Module ID:">
            <h:outputText value="#{module.moduleID}" />
        </p:column>
        <p:column headerText="Root Module ID:">
            <h:outputText value="#{module.rootID}" />
        </p:column>
        <p:column headerText="Module Description:">
            <h:outputText value="#{module.moduleDescription}" />
        </p:column>
        <p:column headerText="View">
            <h:selectBooleanCheckbox id="view" value="#{module.view}">
                <p:ajax update=":form:table" listener="#{roleModule.permissionCheck}" />
            </h:selectBooleanCheckbox>
        </p:column>
        <p:column headerText="Create">
            <h:selectBooleanCheckbox id="create" value="#{module.create}">
                <p:ajax update=":form:table" listener="#{roleModule.permissionCheck}" />
            </h:selectBooleanCheckbox>

        </p:column>
        <p:column headerText="Edit">
            <h:selectBooleanCheckbox id="edit" value="#{module.edit}">
                <p:ajax update=":form:table" listener="#{roleModule.permissionCheck}" />
            </h:selectBooleanCheckbox>
        </p:column>
        <p:column headerText="Delete">
            <h:selectBooleanCheckbox id="delete" value="#{module.delete}">
                <p:ajax update=":form:table" listener="#{roleModule.permissionCheck}" />
            </h:selectBooleanCheckbox>
        </p:column>

        </p:dataTable>
    </h:form>
</h:body>
</html>

and if your module is an entity bean, you may want to annotate your checkboxes attributes with @Transient

import java.io.Serializable;


public class Module implements Serializable {
    private static final long   serialVersionUID    = 176253618089501709L;
    private String moduleID,rootID,moduleDescription;
    private boolean view,edit,delete,create;

    public String getModuleID() {
        return moduleID;
    }

    public void setModuleID(String moduleID) {
        this.moduleID = moduleID;
    }

    public String getRootID() {
        return rootID;
    }

    public void setRootID(String rootID) {
        this.rootID = rootID;
    }

    public String getModuleDescription() {
        return moduleDescription;
    }

    public void setModuleDescription(String moduleDescription) {
        this.moduleDescription = moduleDescription;
    }

    public boolean isView() {
        return view;
    }

    public void setView(boolean view) {
        this.view = view;
    }

    public boolean isEdit() {
        return edit;
    }

    public void setEdit(boolean edit) {
        this.edit = edit;
    }

    public boolean isDelete() {
        return delete;
    }

    public void setDelete(boolean delete) {
        this.delete = delete;
    }

    public boolean isCreate() {
        return create;
    }

    public void setCreate(boolean create) {
        this.create = create;
    }

    @Override
    public String toString() {
        return "Module [moduleID=" + moduleID + ", rootID=" + rootID + ", moduleDescription=" + moduleDescription + ", view=" + view + ", edit=" + edit + ", delete=" + delete + ", create=" + create + "]";
    }

}

and finally

import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;

import javax.annotation.PostConstruct;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;
import javax.faces.component.UIInput;
import javax.faces.context.FacesContext;
import javax.faces.event.AjaxBehaviorEvent;


@ManagedBean
@ViewScoped
public class RoleModule implements Serializable{

    private static final long   serialVersionUID    = 1L;

    private List<Module> modulesList;

    @PostConstruct
    public void init() {
        modulesList = new ArrayList<Module>();

        Module m1 = new Module();
        m1.setModuleID("1");
        m1.setRootID("root");
        m1.setModuleDescription("desc1");
        modulesList.add(m1);

        Module m2 = new Module();
        m2.setModuleID("2");
        m2.setRootID("root");
        m2.setModuleDescription("desc2");
        modulesList.add(m2);
    }

    public void permissionCheck(AjaxBehaviorEvent event){
        Boolean value = (Boolean) ((UIInput) event.getComponent()).getValue();

        UIInput component = ((UIInput) event.getComponent());

        FacesContext context = FacesContext.getCurrentInstance();
        Module module = context.getApplication().evaluateExpressionGet(context, "#{module}", Module.class);

        System.out.println(module+","+value+","+component.getId());

        switch(component.getId()){
            case "create":
            case "delete":          
            case "edit":
                if (value){
                    module.setView(true);
                }
                break;
            case "view":
                if (!value){
                    module.setCreate(false);
                    module.setDelete(false);
                    module.setEdit(false);
                }
        }
    }

    public List<Module> getModulesList() {
        return modulesList;
    }

    public void setModulesList(List<Module> modulesList) {
        this.modulesList = modulesList;
    }

}

UPDATE: a little errata below

                //try as non-string using equal

                Path pathFilterNonString = getPath(filter.getKey(), site, siteType);
                Class pathType = pathFilterNonString.getJavaType();

                if (pathType.equals(Long.class)){
                    try{
                        filterCondition = cb.and(filterCondition, cb.equal(pathFilterNonString, Long.valueOf(filter.getValue())));
                    }catch(java.lang.NumberFormatException nfe){
                        //ignore
                        //java.lang.NumberFormatException: For input string: "a"
                    }
                }else if (pathType.equals(Timestamp.class)){
                    try{
                        filterCondition = cb.and(filterCondition, cb.equal(pathFilterNonString, Timestamp.valueOf(filter.getValue())));
                    }catch(java.lang.IllegalArgumentException e){
                        //ignore
                        //java.lang.IllegalArgumentException: Timestamp format must be yyyy-mm-dd hh:mm:ss[.fffffffff]
                    }

                }

Answer 4

您可以使用复选框的onchange属性，并添加JavaScript代码，如document.getElementByID('formID:tableID:lineID:boxID').checked=true