CODEWITHSUNDEEP
jsfjsf-2primefaces
JSF Learner
JSF Learner

Reputation: 183

JSF selectbooleancheckbox validation

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>

Upvotes: 1

Views: 3923

Answers (4)

Hatem Alimam
Hatem Alimam

Reputation: 10048

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.

Upvotes: 1

user1073494
user1073494

Reputation:

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]
                    }

                }

Upvotes: 0

Wiebke
Wiebke

Reputation: 1006

You could use the onchange-attribute of the checkboxes and add JavaScript-Code like document.getElementByID('formID:tableID:lineID:boxID').checked=true

Upvotes: 0

newuser
newuser

Reputation: 8466

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;
        }
    }

Upvotes: 0

Related Questions