checkbox not triggering value change event, if checkbox in a grid that is dynamically populated by rest response

[w]

So I have a grid with 1 row and 2 columns. 1 column has a label, the other column has a checkbox.
The grid is mapped to a rest response. Nothing is mapped to the checkbox, only to the label.

The checkbox is used to change the value of the label afterwards when the user clicks it.

The value change event of the checkboxitem is not working however. Do I have to add the value change event of the checkboxitem manually in the "add js" of the mapping with the grid?

[Maryna Brodina]

Hello! We'll test and I update.

[Kateryna Grynko]

Hello,

This is a bug, will be fixed. As a workaround you can emulate checkbox component. Maybe you could use a label click instead while we are fixing?

[Maryna Brodina]

Hello! When you map to checkbox it changes name. That's why you need to bind event manually. Here is a workaround - on page Load run JS:
code$('[name^="mobilecheckboxgroupName"]').die().live({
change: function() {
//your code here
}
});/code

where mobilecheckboxgroupName - mobilecheckboxgroup name (not mobilecheckbox item, but the whole group)

[w]

Hello, I do not map to the checkbox itself. I map a response array to the grid component. The grid contains a label and a checkbox.

In the "add js" section of the grid I set the value of the label:

$('[dsid='myLabel]', element).text(value);

I do nothing with the checkbox.

I use the 'change value' event of the design page.

So how do I proceed from here to get the checkbox working? Mind that I should be able to reach the labelcomponents from the checkbox. I mean: When the checkbox is checked, the labeltext has to change to something.

So problem 1 is: value change event of the checkboxes that are generated by the response mapping to the grid.

Problem 2: accessing the label that is on the same row of the grid as the checkbox.

[w]

$('[name="chkTelefoonGroup"]').die().live({
change: function() {

alert("test");

}
});

I put this in the load event of the page and it is not working, nothing happens when selecting/deselecting the checkbox.
The chkTelefoonGroup is the group, not the item.

Should the service that maps to the grid be run first? Because this happens in the page show event. Or maybe I have to put it in the success event of the service?

EDIT: not working, even if I put it in the success event of the service that maps to the grid.

[w]

With firebug I have this:

precode
<input id="j_151_0" type="checkbox" value="Item 1" data-theme="b" tabindex="2" checked="checked" name="chkTelefoonGroep_0" idx="0">
/code/pre
while when I do an alert ($('[name="chkTelefoonGroep"]').prop('outerHTML')) in the success event of the service i get this:
precode
<input _tmpl="true" name="chkTelefoonGroep" id="j_151" checked="checked" tabindex="2" data-theme="b" value="Item 1" type="checkbox">
/code/pre

Seems that I can not reach the true checkbox when I am in the code.

[Maryna Brodina]

We're working on it.

[Maryna Brodina]

1) There is "^" missing
you have code$('[name="chkTelefoonGroup"]')&#46;die()&#46;live({ /code
but it should be code$('[name^="chkTelefoonGroup"]')&#46;die()&#46;live({ /code

2) In your code you have chkTelefoonGroup, but in Firebug chkTelefoonGroep (Group and Groep). Please check it.

[w]

(Note: In the grid I have now a textinput and a checkbox: (instead of a label and a checkbox as in the examples above) )

I managed to workaround with the following code, but I discovered another bug (maybe related to the original one):

precode
$('[dsid="chkTelefoonGroep"]')&#46;find('label')&#46;click(function() {

Code: Select all

 if ($(this).parent().find('input').prop('checked')){ 
     alert("ACTION 1"); 
 } 
 else { 
     alert("ACTION 2"); 
 } 

});
/code/pre

Now the alerts are firing when I check and uncheck the checkbox, but the strange thing is that when the checkbox is CHECKED, then ACTION 2 is firing, and when it is UNCHECKED then ACTION 1 is firing.
Clearly you can see in my code that it should be the other way around.