Editor form select value does not show current field value

AVHtech

When I select a row in the table and click edit the editor form displays the correct current values for all the fields except one of the Select fields. There are 2 select fields and the first "User Type" field shows the correct value while the second "Group" value shows the first value from the "option" list.

I added some debug code to capture the values in the console.
- I found that the editorUser.get() returns null for both these select fields when the editor form first loads. I captured both the lists of options returned for the select fields as well and they both include the values currently selected for those fields.
- I just cant find where the current value for the field is set, the code for both fields are the same but one has the correct value and the other not.

This screenshot shows the table with the highlighted row, edit form with incorrect group value and the console data showing (top to bottom), the current row data, values from get(), user type list for the select options, group list for the group.

Here are some code snippets:

      var editorUser = new $.fn.DataTable.Editor( {
            ajax:  fetchOrigin + '/app/src/get-data.php?s=setUserList',
            table: '#usersDataTable',
            display: 'bootstrap',
            idSrc: 'id',
            fields: [
                { label: 'Username', name: 'Username' },
                { label: 'User Type', name: 'User_Type', type: 'select' },
                { label: 'Email', name: 'Email' },
                { label: 'First Name', name: 'First_Name' },
                { label: 'Last Name', name: 'Last_Name' },
                { label: 'Group', name: 'Group_Id', type: 'select' }
            ]
        } );
         editorUser.on('preSubmit', function ( e, o, action ) {
            if (action !== 'remove') {
                var usernameField = this.field('Username');
                var emailField = this.field('Email');
                var firstNameField = this.field('First_Name');
                var lastNameField = this.field('Last_Name');
        
                // Ensure values are present for each field:
                if (!usernameField.val()) {
                    usernameField.error( 'A username must be provided.' );
                }
                if (!emailField.val()) {
                    emailField.error( 'A valid email address must be provided.' );
                }
                if (!firstNameField.val()) {
                    firstNameField.error( 'A first name must be provided.' );
                }
                if (!lastNameField.val()) {
                    lastNameField.error( 'A last name must be provided.' );
                }
        
                // If any error was reported, cancel the submission so it can be corrected
                if (this.inError()) {
                    return false;
                }
            }
        } );
        
        $('#usersDataTable').DataTable(
            {
                dom: 'Bfrtip',
                select: true,
                serverSide: true,
                //ajax: fetchOrigin + '/app/src/get-data.php?s=getUserList&client=' + clientSlug,
                ajax: fetchOrigin + '/app/src/get-data.php?s=getUserList',
                buttons: [
                    { extend: 'create', editor: editorUser },
                    { extend: 'edit',   editor: editorUser },
                    { extend: 'remove', editor: editorUser }
                ]
            }
        );
        
        
        // Below will be used for listening for the editor modal to open:
        editorUser.on( 'open', function ( e, type ) {
            var openVals;
            console.log('Editor ' + type + ' form shown');
            openVals = JSON.stringify( editorUser.get() );
            console.log('Editor values' + openVals);
        
            // Retrieve user types to populate the select element in the editor modal:
            var optionsUserTypes = [];
            $.getJSON(fetchOrigin + '/app/src/get-data.php?s=getUserTypesForEditor&userType=' + userType, {
                    term: "-1"
                },
                function(data) {
                    console.log(data);//debug
                    var option = {};
                    $.each(data, function(i, e) {
                        option.label = e.label;
                        option.value = e.label;
                        optionsUserTypes.push(option);
                        option = {};
                    });
                }
            ).done(function() {
                editorUser.field('User_Type').update(optionsUserTypes);
            });
        
            var optionsGroups = [];
            $.getJSON(fetchOrigin + '/app/src/get-data.php?s=getGroupsForEditorSelect', {
                    term: "-1"
                },
                function(data) {
                console.log(data);//debug
                    var option = {};
                    $.each(data, function(i, e) {
                        option.label = e.label;
                        option.value = e.value;
                        optionsGroups.push(option);
                        option = {};
                    });
                }
            ).done(function() {
                editorUser.field('Group_Id').update(optionsGroups);
            });
        
        });

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

allan

When this happens it is because the value for the field is not available in the options list for the select. Can you give me a link to your page, so I can help to debug and track it down? You can PM me the link by clicking my forum user name above if you don't want to make it public.

Allan

AVHtech

Thank you for your input I got it to work.

B.Redd

How did you get this to work?

allan

@B.Redd If you are having problems with this, please give us a link to the page and I'll take a look.

Allan

sysdev_idbm

hai @allan i get same problem with this, how to fix it?

allan

As I mentioned in my previous reply in this thread, if you could give me a link to the page showing the issue, that would really help with debugging it.

Allan