Editor: creating a dynamic select label/value options

Editor: creating a dynamic select label/value options

chris.cavagechris.cavage Posts: 46Questions: 12Answers: 0

I am trying to make the default_provider field show with dynamic data from my database. I am trying to use an array to populate the select, if that's an okay thing to do.

I did a console.log on default_provider_options and it is creating the array based on the ajax call. Any tips on how to make this work?

   var default_provider_options = [];

    $.getJSON('ajax_get_json.php?what=company_providers', function (data) {

        $.each(data, function (index) {
            default_provider_options.push({
                value: data[index].value,
                label: data[index].text
            });
        });

    });

    var editor = new $.fn.dataTable.Editor({
        ajax: 'php/table.users.php?company_id='+<?php echo $company->data()->id ?>,
        table: '#table_settings_users',
        fields: [
            {
                "label": "First Name:",
                "name": "first_name"
            },
            {
                "label": "Middle Name:",
                "name": "middle_name"
            },
            {
                "label": "Last Name:",
                "name": "last_name"
            },
            {
                "label": "Username:",
                "name": "username"
            },
             {
                "label": "Email:",
                "name": "email"
             },
             {
                "label": "Active:",
                "name": "active",
                "type": "select",
                "def": "Y",
                ipOpts: [
                {
                    label: "Yes",
                    value: "Y"
                },
                {
                    label: "No",
                    value: "N"
                }
            ]
             },
             {
                "label": "Can Schedule For?:",
                "name": "can_schedule_for",
                "type": "select",
                "def": "Y",
                "options": [
                {
                    label: "Yes",
                    value: "Y"
                },
                {
                    label: "No",
                    value: "N"
                }
            ]
             },
             {
                "label": "Default Provider:",
                "name": "default_provider",
                "type": "select",
                "ipOpts": default_provider_options
             },
            {
                "label": "company_id:",
                "name": "company_id",
                "type": "hidden",
                "def": <?php echo $company->data()->id; ?>
             }

        ]
   });

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 61,864Questions: 1Answers: 10,136 Site admin
    edited July 2016 Answer ✓

    The "problem" is that $.getJSON() is async by its very nature. So by the time the array is being populated, the Editor initialisation has already completed with default_provider_options as an empty array.

    What you need to do instead is use the update() method of the select field type after you've got the results.

    For example - on line 11 add::

    editor.field( 'default_provider' ).update( default_provider_options );
    

    Allan

    edit typo in code

  • chris.cavagechris.cavage Posts: 46Questions: 12Answers: 0

    Makes sense! Thanks, that did the trick.

This discussion has been closed.