standalone editor with multiple and values

wouter

He everyone!

I'm using the standalone editor with a select2. I populate the select by using the editor.field().update(); and initiate the editor using the same structure as in the examples with an <dd data-editor-field="protocol">TCP</dd>.

But in the examples the value of the select is always the same as the option. In my case i need the id's of multiple options. But select2 doesn't understand this so when i open the editor the select-box doesn't show the currently selected options.

Is there a way to use the field().update() to set the currently selected options? I was thinking maybe i could do something like this: <dd data-editor-field="protocol" data-selected="[123,26,53,25]">some text</dd> and then use field().update() to get the selected options and show them in the select2.

Thanks!
Wouter

allan

field().update() to set the currently selected options?

No - the update() method is used only to set the options - not the selected values. The field().val() method can be used to select the options that have been populated in the list.

Are you calling the update() method when the Editor form is open, or at some time after the edit() method is called?

Allan

wouter

Hi Allen,

Thank you! I managed to set the value an even multiple values. It's behaving a bit buggy so i need to go over the code a few times but that brings me a big step closer!

ahjamshidi

wouter can I ask how you manage it ?
I face this problem too.

wouter

He Ahjamshidi,

I'm still working on it, but in essence it's this; i use the same page structure as in the examples with dd and dt:

<div id="shares_detail" class="container details" data-editor-id="1234">
    <dl>
        <dt>title</dt>
            <dd class="edit_inline" data-editor-field="shares.foldertitle"></dd>
        <dt>download</dt>
            <dd class="edit_inline" data-selected="" data-editor-field="shares.download"></dd>
        <dt>notes</dt>
            <dd class="edit_inline nowrap" data-editor-field="shares.foldernotes"></dd>
    </dl>
</div>

then i have a function that read the data from the database using a jquery ajax call:

function refresh_sharesdetail(){
    $.ajax( {
       "url"            : '/data/shares/',
    "dataType"      : 'json',
     "type"         : "post",
"data"          : { "id" : $( "#shares_detail" ).data( "editor-id" ) },
            "success"       : function ( json ) {
                $('*[data-editor-field="shares.foldertitle"]').text( json.data[0]['shares'].foldertitle );
                $('*[data-editor-field="shares.download"]').text( (json.data[0]['shares'].download == 1 ? "yes" : "no") );
                $('*[data-editor-field="shares.download"]').data( "selected", json.data[0]['shares'].download );
                $('*[data-editor-field="shares.foldernotes"]').text( json.data[0]['shares'].foldernotes );
                }
            });
        }

notice the id that is being read from the data-editor-id atribute and more important, notice that i set an extra data atribute called "selected" on field that is being used as options. that one is important because in my case i have two options, "yes" and "no", but they are stored as 1 or 0. So i want the form to display "yes" or "no" but also need the value and store that in the data-selected atribute. If you have multiple you can add it in the form of an array ["1","2","3","4"] (not sure, but think you need the quotes).
anyways, this function is called when the page is ready. so the form contains the initial record from the database.

then i initiate the editor, nothing special here:

    var shares_editor = new $.fn.dataTable.Editor( {
            "ajax"      : '/data/shares/',
            "fields"    : [
                {
                    "label"     : "foldername:",
                    "name"      : "shares.foldername",
                    "type"      : "readonly"
                },
                {
                    "label"     : "foldertitle:",
                    "name"      : "shares.foldertitle"
                },
                {
                    "label"     : "download:",
                    "name"      : "shares.download",
                    "type"      : "select",
                    "separator" : ",",
                    "options"   : [ { "label": "yes", "value": 1 }, { "label": "no", "value": 0 } ]
                },
                {
                    "label"     : "notes:",
                    "name"      : "shares.foldernotes",
                    "type"      : "textarea"
                },
            ]
        });

then i watch for the editor being opened, if it is opened i read the value from the data atribute and then set the option to that value. so this takes care of the selected options in the editor.

    shares_editor.on( 'open', function ( e, json, data ) {
        var download_option = $('*[data-editor-field="shares.download"]').data( "selected");
        shares_editor.field('shares.download').val(download_option);
        });

and then when ready editing the data in the form needs to refresh. i do this by calling the same function from earlier. not the cleanest way but works perfect:

    shares_editor.on( 'postEdit', function ( e, json, data ) {
        refresh_sharesdetail();
        });

i use and inline editor which i open with this:

    $('#shares_detail .edit_inline').on( 'click', function (e) {
        shares_editor.inline( this, { "onBlur": 'submit' });
        });

for another page where the option contains a long list that is being loaded from the database. this is done by loading the data from the database using an ajax request, and sending that to the option using update() and then setting the value, the same way using the val().

costs_editor.on('open', function(e, node, data){
    $.ajax({
    "dataType"  : "json",
    "url"       : "/data/projects_lookup/",
    "success"   : function(proj_lookup) {
    costs_editor.field('projects[].id').update( proj_lookup );
    var x = $('*[data-editor-field="projects[].id"]').data( "selected");
    costs_editor.field('projects[].id').val(x);
    }
    });
});

does that help you?