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

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

resqonlineresqonline Posts: 58Questions: 14Answers: 0

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

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 61,436Questions: 1Answers: 10,049 Site admin
    Answer ✓

    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

  • resqonlineresqonline Posts: 58Questions: 14Answers: 0

    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?

  • resqonlineresqonline Posts: 58Questions: 14Answers: 0

    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.

  • allanallan Posts: 61,436Questions: 1Answers: 10,049 Site admin

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

    Allan

Sign In or Register to comment.