Dynamic checkbox list

Dynamic checkbox list

ubdpetersubdpeters Posts: 26Questions: 8Answers: 0

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

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 63,602Questions: 1Answers: 10,486 Site admin

    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

  • allanallan Posts: 63,602Questions: 1Answers: 10,486 Site admin

    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

  • ubdpetersubdpeters Posts: 26Questions: 8Answers: 0

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

  • ubdpetersubdpeters Posts: 26Questions: 8Answers: 0

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

  • ubdpetersubdpeters Posts: 26Questions: 8Answers: 0

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

  • ubdpetersubdpeters Posts: 26Questions: 8Answers: 0

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

    } );

  • allanallan Posts: 63,602Questions: 1Answers: 10,486 Site admin

    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

  • ubdpetersubdpeters Posts: 26Questions: 8Answers: 0

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

  • ubdpetersubdpeters Posts: 26Questions: 8Answers: 0

    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'
            }
        } );
    
  • ubdpetersubdpeters Posts: 26Questions: 8Answers: 0

    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"]);

  • allanallan Posts: 63,602Questions: 1Answers: 10,486 Site admin
    Answer ✓

    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

This discussion has been closed.