Setting checkbox via javascript/jQuery

milled00

Hi,
I'm using Editor in stand-alone mode and I've defined a checkbox thus:

{
 label: "test",
 name: "test",
 type: "checkbox",
 options: [
  { label: "one", value: 1}, { label: "two", value: 1}
 ]
}

I'm querying a database via jQuery and get an array back with the values [0, 1]. How do I set the relevant checkbox (label "two" in this case)?

Thanks in advance.
Regards,
Dave

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan

Hi Dave,

Just to check - do you mean to have two different checkboxes which have the same value? I'm not actually sure that is valid HTML - it certainly seems a little counter intuitive.

Your value array has a 0 in it, but there is no 0 value - is that a typo perhaps?

Allan

milled00

Hi Allan,
Sorry - I've not ben clear and I expect I'm missing something really simple. I've a number of checkboxes on the page which all fall into a single category so I would like the bubble editor to allow all the checkboxes to be edited at once. I've defined a checkbox field with two labels for the editor as above (thanks for reformatting) which means I get the two checkboxes in the bubble editor. I suppose my real query is how do you actually map these to the two HTML checkboxes on the form - can I use the data-editor-field attribute to map the HTML checkbox to the editor field? If so how do I ensure the correct box gets mapped to the correct "label":

<input type="checkbox" data-editor-field="test" id="one"><label for="one">one</label>
<input type="checkbox" data-editor-field="test" id="two"><label for="two">one</label>

With regard to your specific question - sorry I was unclear - the array has elements corresponding to each checkbox - 0 means unchecked and 1 means checked. So in this example the first checkbox ("one") would be unchecked and the second ("two") would be checked.

Thanks
Dave

allan

Are these values all one field, or are the separate fields (which is what it sounds like)? From your description it sounds like you need multiple fields - one for each value.

Allan

milled00

They're separate fields in the backend database but that's because they're stored as SQL bit columns but they're really a single item with multiple checkboxes. Would the following work:

{
    label: "test",
    name: "test",
    type: "checkbox",
    options: [ { label: "one", value: "one"}, { label: "two", value: "two" } ]
}

Could this be set by something like:

editor.field('test').val('two'); // check "two" checkbox

or

editor.field('test').val('one|two'); // check "one" and "two" checkboxes

Thanks

allan

That would mostly work - but if you did val('two') while it would check that checkbox, it would also uncheck any others which are already checked since the value being set doesn't include them.

What's the goal of using a single field to show multiple values, rather than just using one field for each value?

Allan

milled00

I have a page with two categories each of which has several checkboxes (they're "select all that apply" type fields). Rather than the bubble displaying one checkbox at a time I'd like it to display all checkboxes for each category. I have looked at https://editor.datatables.net/examples/bubble-editing/grouped.html but that doesn't seem to work perhaps because I'm using the editor standalone rather than with a Datatables form.
Thanks.

allan

Are you able to give me a link to the page showing the multiple fields in the bubble editor not working, as I think that would be just about perfect (unless I'm misunderstanding :-) ).

Allan

milled00

Hi Allan,
Alas not because it's on our intranet. The HTML is:

<div class="checkboxDivFT">
    <input data-editor-field="FRP" id="FRP" onclick="return false" type="checkbox">
    <label for="FRP">FRP</label>
</div>
<div class="checkboxDivFT">
    <input data-editor-field="TF" id="TF" onclick="return false" type="checkbox">
    <label for="TF">TF</label>
</div>
<div class="checkboxDivFT">
    <input data-editor-field="TF2" id="TF2" onclick="return false" type="checkbox">
    <label for="TF2">TF2</label>
</div>

The JavaScript is:

editorTrackingStatus = new $.fn.dataTable.Editor({
    ajax: URL,
    fields: [
        {
            label: "Status",
            name: "Status",
            type: "select"
        },
        {
            label: "FRP",
            name: "FRP",
            type: "checkbox",
            options: [ { label: '', value: 1 } ],
            editField: ["FRP", "TF", "TF2" ]
        },
        {
            label: "TF",
            name: "TF",
            type: "checkbox",
            options: [ { label: '', value: 1 } ],
            editField: ["FRP", "TF", "TF2" ]
        },
        {
            label: "TF2",
            name: "TF2",
            type: "checkbox",
            options: [ { label: '', value: 1 } ],
            editField: ["FRP", "TF", "TF2" ]
        }
    ]
});

The issue with using multiple fields in the bubble as per the example (https://editor.datatables.net/examples/bubble-editing/grouped.html) is that, in this example, the editField option is added to the datatable's javascript rather than the editor's. Since we're using the editor standalone there is no datatable (if you see what I mean). On the off chance I added it to the editor's javascript but it didn't do anything.

Thanks.

allan

There is no editField option for the Editor field array - that's a DataTables configuration option to tell Editor what fields to edit based on a column.

Instead, what you want here is to pass an array of field names into the bubble() method when you call it. At the moment I presume you are only passing one in, but if you pass them all, all of the fields will show up.

Allan

milled00

Thanks Allan.
Regards,
Dave