One-to-many checkboxes in standalone example

Restful Web Services

I am trying to combine these two examples, https://editor.datatables.net/examples/advanced/joinArray.html and https://editor.datatables.net/examples/standalone/simple.html, to create a standalone editor which uses one-to-many checkboxes.

I understand that when using the standalone editor the additional options data is not loaded so you must load it separately, I have done this and it almost works. All my checkboxes load correctly but the selected checkboxes, i.e the ones which should show a tick, does not work with multiple selected values. So it is the pre-selected values which isn't working for multiple values.

If anyone can point me in the right direction that would be great.

        var editor;  
         
        $(document).ready(function() {
            editor = new $.fn.dataTable.Editor( {
                ajax : {
                    url : "/modules/DataTables/action.run_datatable.php",
                    type : "POST",
                },
                fields: [{
                    label : "Categories:*",
                    name : "system_resource_category[].resource_category_id",
                    type : "checkbox"
                }]
            });    
            editor.on('open', function() {  

                var optionsI = [];
                var optionI = $("span#optionI").attr("data-editor-value");
                $.ajax({
                    type : 'POST',
                    url : '/modules/DataTables/action.run_datatable.php',
                    dataType: 'json',
                    data : { 
                        table: 'system_resource_category',                                                           
                    },
                    success : function(response) {
                        var option = {};
                        $.each(response['data'], function (i, e) {
                            option.label = e.system_resource_category['name'];
                            option.value = e.system_resource_category['resource_category_id'];
                            optionsI.push(option);
                            option = {};
                        });  
                        editor.field('system_resource_category[].resource_category_id').update(optionsI).val(optionI);           
                    } 
                }); 

                editor.on( 'submitSuccess', function ( e, json, data, action ) {
                    var categories = json['data']['0']['system_resource_category'].map(function(entry) { return entry.name; }).join(', ');                    
                    $('[data-editor-field="system_resource_category[].resource_category_id"]').text(categories);
                }); 

            });
            
        });

<tr><td> Categories: </td><td> <span id="optionI" data-editor-field="system_resource_category[].resource_category_id" data-editor-value="8, 7">Hillwalking and Navigation Courses, Winter Courses</span> </td></tr>

Thanks

Chris

allan

Try adding separator: ', ' into your checkbox field's options.

Reasoning: By default it expects an array. However, you have a string: "8, 7". Using separator tells Editor how to split and then join a given string into an array.

Allan

Restful Web Services

That does work in the sense it marks multiple values as checked but because the server side script expects an array it no longer saves.

Would the best option to be to update this line:

editor.field('system_resource_category[].resource_category_id').update(optionsI).val(optionI)

So that .val(optionI) is an array rather than a string and if so what format should the array be in for multiple values. I haven't been able to find an example in the documentation?

Thanks

Chris

allan

Hmm - the issue here is that your input value is a string, but you are expecting an output of an array. I would very much suggest that you use a consistent type - in this case a string since you have the value as an attribute.

You could possibly use optionI.split(', ') to get the array on the input.

Allan

Restful Web Services

Great, that did the trick. Thanks.