Call Javascript function onchange of f:selectitems

Question

I am new to jquery. My project invovles primefaces 4.0, jsf 2.1 (xhtml).

I have a select all boolean checkbox, and a selectmanycheckbox which is filled using a list retreived from the server side.

<p:tab title="Service Status" >
    <p:selectBooleanCheckbox itemLabel="Select All"
        value="#{myBean.selectAllStatus}"
        id="selectAllStatus" style="margin-left:4px;" onchange="selectAllStatus(this);" >
    </p:selectBooleanCheckbox>
    <p:selectManyCheckbox
        value="#{myBean.serviceStatusFilterList}"
        layout="pageDirection" id="empListSub">

        <f:param name="tabValue" value="1" />
        <f:selectItems value="#{serviceCalendarViewBean.serviceStatusList}" var="status"
            itemLabel="#{status.title}" itemValue="#{status.id}"/>
    </p:selectManyCheckbox>
</p:tab>
</p:accordion>

The Javascript called when the 'select all' checkbox is clicked is

function selectAllStatus(element)
{
   var selectAll = element.checked;
   $( 'input[id^="'accord:empListSub'"]' ).each(function(){
        this.checked=selectAll;
   });
}

When i uncheck the 'select all' checkbox, i need the all checkboxs generated by f:selectitems to be unchecked and vice versa.

The below code in the change event's javascript gave me an error in the console. Error is "unexpected syntax error ; "

$( 'input[id^="'accord:empListSub'"]' ).each(function(){
    this.checked=selectAll;
});

In the network the javascript code appears as

$( 'input[id^=&quot;'accord:empListSub'&quot;]' ).each(function(){
     this.checked=selectAll;
});

I tried removing the double quote which was of no use.

So could anybody help me out here.

In jquery, When i uncheck the 'select all' checkbox, i need the all checkboxs generated by f:selectitems to be unchecked and vice versa.

And also when i check or uncheck any of the f:selectItems it also has to call another javascript function.

How do i do that?

I think the problem is that Primefaces uses theming for checkboxes so you can't just do it the normal jquery way. You have to fiddle with showing/hiding the check-image on the container. I tried it but failed, but I think its possible — Jaqen H'ghar
– Jaqen H'ghar, Commented Aug 23, 2014 at 8:16
PrimeFaces 4.1 doesn't exist. At least, not as final/official release. — BalusC
– BalusC, Commented Aug 25, 2014 at 11:16

mehere · Accepted Answer · 2014-08-25 10:52:15Z

1

The problem was with the component referencing

$( 'input[name^=accord\\:empListSub]' ).each(function(i,obj){
    $('div .ui-chkbox-box').addClass('ui-state-active');
    $('span .ui-chkbox-icon').addClass('ui-chkbox-icon ui-icon ui-icon-check ui-c');
 );

answered Aug 25, 2014 at 10:52

mehere

1,5385 gold badges29 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

marc_s · Accepted Answer · 2016-02-03 17:02:57Z

0

Try to use prop() in jQuery to set the checked property

 $( 'input[id^='+accord:empListSub+']' ).prop("checked",selectAll);

edited Feb 3, 2016 at 17:02

marc_s

760k186 gold badges1.4k silver badges1.5k bronze badges

answered Aug 23, 2014 at 6:57

Balachandran

9,6271 gold badge19 silver badges26 bronze badges

Collectives™ on Stack Overflow

Call Javascript function onchange of f:selectitems

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related