Dynamic checkbox list

ubdpeters

I'm dynamically creating a list of checkbox items whenever the user changes the selection in a previous field. Everything appears to be working, except being able to check certain boxes. What am I doing wrong? Any help would be appreciated.

        $.ajax({
            url:"inc/getWorkOrderItems.php",
            method:"POST",
            data:{workOrderId:workorder, timesheetId:timesheet},
            success:function(data)
            {
                var jsonData = JSON.parse(data);
                var item = {};

                for (var i = 0; i < jsonData.length; i++)
                {
                    item.label = (i+1).toString() + "   " + jsonData[i].number + " - " + jsonData[i].name;
                    item.checked = true;//jsonData[i].checked;
                    item.value = jsonData[i].id;
                    items.push(item);
                    item = {};
                }
                timesheetEditor.field('workorder_items').update(items);
            }
        });

allan

I don't see anything obvious wrong there. What does console.log(JSON.stringify(items)); show, just before your field(...).update() call?

Are you able to give me a link to a page show the issue?

Allan

allan

Actually - looking at the code again, I don't see items being defined. I think the code should be:

$.ajax({
    url:"inc/getWorkOrderItems.php",
    method:"POST",
    data:{workOrderId:workorder, timesheetId:timesheet},
    success:function(data)
    {
        var jsonData = JSON.parse(data);
        var items = [];
 
        for (var i = 0; i < jsonData.length; i++)
        {
            var item = {};
            item.label = (i+1).toString() + "   " + jsonData[i].number + " - " + jsonData[i].name;
            item.checked = true;//jsonData[i].checked;
            item.value = jsonData[i].id;
            items.push(item);
        }
        timesheetEditor.field('workorder_items').update(items);
    }
});

Or slightly rewritten:

$.ajax({
    url:"inc/getWorkOrderItems.php",
    method:"POST",
    data:{workOrderId:workorder, timesheetId:timesheet},
    success:function(data)
    {
        var jsonData = JSON.parse(data);
        var items = [];
 
        for (var i = 0; i < jsonData.length; i++)
            items.push({
                label: (i+1).toString() + "   " + jsonData[i].number + " - " + jsonData[i].name,
                checked: true, //jsonData[i].checked,
                value: jsonData[i].id
            });
        }

        timesheetEditor.field('workorder_items').update(items);
    }
});

Allan

ubdpeters

It still isn't checking them. Everything shows up correctly, other than the checkboxes not being checked.
Here is console.log(JSON.stringify(items));

[{"label":"1 5a - test part 5a","checked":true,"value":"5"},{"label":"2 1a - test part #12","checked":true,"value":"1"},{"label":"3 3a - ","checked":true,"value":"3"},{"label":"4 4a - test parts 4a","checked":true,"value":"4"},{"label":"5 part 90 - part 90","checked":true,"value":"14"}]

ubdpeters

Maybe this will shed some light on something.
If I set "value" to 0 (zero), they get checked. Any ideas?

ubdpeters

Is it the way I have the field setup? If I remove "options" the checkboxes are not checked anymore. I'm going to try modifying one of the example apps and see if something in my code is causing some problems.
.
.
.
}, {
label: "Work Order Items:",
name: "workorder_items",
type: "checkbox",
options: [
{ label: "No", value: 1 },
{ label: "Yes", value: 0 },
{ label: "Bob", value: 0 }
],
}, {

ubdpeters

I modified example file joinArray.html
I did not modify any other files.
The list of checkbox items shows up, but nothing is checked.

Added new field.
}, {
"label": "Items:",
"name": "items",
"type": "checkbox"
}

Added:
editor.on( 'open', function ( e, type )\
{
var items = [];

 for (var i = 0; i < 5; i++)
 {
        items.push({
            label: (i+1).toString(),
            checked: true,
            value: i
         });
}
editor.field('items').update(items);

} );

allan

There is a difference between the data type being used for the value. In your setup it is a number, while in the update it is a string.

What is the data type of the ‘items’ property? I’m not sure if that is the issue, but that’s the obvious difference there.

If you could link to a page showing the issue, that would be great, so I can inspect and debug it.

Thanks,
Allan

ubdpeters

I sent you the link for a test page. Let me know if you have problems accessing it.

ubdpeters

Using your joinArray example, I added the following to "editor.on('preOpen',...".
Although the items showed up, they were not checked. Can you give me an example of dynamically adding checkboxes to the editor and then checking them?

    editor.add( {
        type:  "checkbox",
        label: "Years:",
        name:  "years",
        options: [
            { name: "1900", id: 5, checked:true },
            { name: "1901", id: 6, checked:true },
            { name: "1902", id: 7, checked:true },
            { name: "1903", id: 8, checked:true }
        ],
        optionsPair: {
            label: 'name',
            value: 'id'
        }
    } );

ubdpeters

I think I figured out a way around it.
If I add this to 'preOpen':
editor.add( {
type: "checkbox",
label: "Years:",
name: "years",
options: [
{ name: "1900", id: 5 },
{ name: "1901", id: 6 },
{ name: "1902", id: 7 },
{ name: "1903", id: 8 }
],
optionsPair: {
label: 'name',
value: 'id',
}
} );

I can call this to set certain checkboxes.
editor.set('years', ["5", "6", "7"]);

allan

Hi,

Sorry for the delay in getting back to you about this! I think your workaround is the correct thing to do. Editor's options do not consider the checked property, rather they take the value from the data point being edited. I should have realised that was the issue when looking at the code before - apologies.

Set the options and then set the value as you are is the way to do this.

Allan