Editor select field with options from HTML (or rather PHP)

resqonline

I am using a custom HTML form based on the Custom form layout / templates (tags) documentation for my Editor form, however I am having trouble with select dropdown fields. The options for the select field are implemented via PHP (because it's a WordPress function), but I am not sure how I need to set up this field to let Editor know this as a field to be used with those options for selection? I'm not that good with jQuery/JS, so please bear with me

allan

Editor has two methods for how to populate the options of a select:

1. Its options property
2. Ajax loaded data in the options property for the field in question.

It sounds like you might be wanted to use an existing <select>? I'm afraid Editor doesn't have that ability. Is that right, or have I misunderstood?

Thanks,
Allan

resqonline

Yes, you understood correctly: I wanted to use an existing select field.
If I understand you correctly, I have to do an ajax call for getting the options from elsewhere?

resqonline

I believe I got it now:

var contacteditor;
    var userselect = [];

    $(document).ready(function($) {

        $.ajax({
            url: datatablesajax.url,
            data: {
                action: 'getusers',
            },
            dataType: "json",
            success: function(data){
                var option = {};
                $.each(data, function(key, val) {
                    $.each(val, function(i, e){
                        option.label = e.text;
                        option.value = e.id;
                        userselect.push(option);
                        option = {};
                    });
                });

            }
        }).done(function(data){
            contacteditor.field('user_id').update(userselect);
        });

        contacteditor = new $.fn.dataTable.Editor( {
            table: '#contactstable',
            template: '#contacts_form',
            fields: [{
                label: "User",
                name: "user_id",
                type: 'select',
                optionsPair: userselect.data,
                placeholder: "Please select",
            }],
            ajax: {
                create: {
                    type: 'POST',
                    url: datatablesajax.url,
                    data: {
                        action: 'createcontact',
                    },
                    dataType: "json",
                },
            }
        } );

[...]

At least it shows the correct labels and values in the select field.

allan

Yup - that will do it nicely if you can get the options via Ajax like that.

Allan