CODEWITHSUNDEEP
javascriptjsfprimefaces
Cristi
Cristi

Reputation: 31

Primefaces selectManyCheckbox javascript issue

I have developed an application with JSF 2.2 and Primefaces 4.0, and I have the following problem:

In a panelGrid with two columns i have two selectManyCheckbox (SMC1 that contains Queues and SMC2 that contains users; between users and queues I have a ManyToMany relationship).

What I want to do is that when I click a checkbox from the SMC1 to change the background of the corresponding checkbox labels from the SMC2 with the help of javascript.

I was thinking to implement it using Ajax calls like in the following scenario:
1. Click on a queue checkbox;
2. An Ajax call is sent to server with the corresponding queueId;
3. Server side script fetch the associated users and return a JSON string with corresponding userIds;
4. On client side i have a callback function that received the JSON from server and should highlight the corresponding checkbox labels;

My specific problem now is that i don't know how to select every label in order to change the background, because the labels generated by Primefaces doesn't have id's.

<h:form id="aUsers">
<p:panelGrid columns="2" style="width:100%; margin-bottom:10px" cellpadding="5">

<p:selectManyCheckbox onchange="submitNewCheckBoxValue([{name:'qId',value:this.value}]);" id="q" value="#{bean.qIds}" layout="grid" columns="3" converter="javax.faces.Long" converterMessage="Error."> 
    <f:selectItems  value="#{bean.qs}" 
            var="q" 
            itemValue="#{q.id}" 
            itemLabel="#{q.name}"/>
</p:selectManyCheckbox>  

<p:selectManyCheckbox id="users" value="#{bean.usIds}" layout="grid" columns="3" converter="javax.faces.Long" converterMessage="Error."> 
    <f:selectItems  value="#{bean.us}" 
            var="u"
            itemValue="#{u.id}"
            itemLabel="#{u.name}"/>  
</p:selectManyCheckbox>

</p:panelGrid>
<p:remoteCommand name="submitNewCheckBoxValue" 
                 process="@this q"
                 actionListener="#{bean.xxx()}" 
                 oncomplete="handleSaveRequest(xhr,status,args);" />
</h:form>

My javascrip code is: 

function handleSaveRequest(xhr, status, yourobject) { 
var f = document.getElementById('myForm');
var iLen=f.elements.length;
for (var i=0; i<iLen; i++) {
        if (f.elements[i].type == "checkbox" && f.elements[i].id.substr(0,12) == 'myForm:users') {
            //i don't know what to do next  
        }
}

}

Generated source code for one checkbox and the attached label generated by the users selectManycheckbox 

<td>
<div class="ui-chkbox ui-widget">
    <div class="ui-helper-hidden-accessible">
        <input id="myForm:users:0" name="myForm:users" value="3" type="checkbox">
    </div>
    <div class="ui-chkbox-box ui-widget ui-corner-all ui-state-default">
        <span class="ui-chkbox-icon ui-c"></span>
    </div>
</div>
</td>
<td>
    <label for="myForm:users:0">username</label>
</td>

Upvotes: 1

Views: 1043

Answers (1)

Cristi
Cristi

Reputation: 31

I have resolved this problem with the help of jquery, something like this 

var f = document.getElementById('myForm');
var iLen=f.elements.length;
for (var i=0; i<iLen; i++) {  
    if(f.elements[i].id.substr(0,12) == 'myForm:users') {
        $(document).ready(function(){
            elemDivParent1 = $(f.elements[i]).parent("div");  
            elemDivParent0 = $(elemDivParent1).parent("div");  
            elemParentTd = $(elemDivParent0).parent("td");  
            elemSiblingTd = $(elemParentTd).next();  
            $(elemSiblingTd).addClass("light");  
    });
}

Upvotes: 1

Related Questions