Select input type selected values.

clazette · February 2016

I am using the select2 plug-in with DataTables Editor. Everything is working except when loading the editor form and having selected values. I have multiple set to true, the options are displayed in the table, and are all values are saved with the edit submission. However, again, when the edit form loads, the existing selected items are not selected.

I've looked at DT/Editor documentation, select2 documentation, Googled, etc. and I can't seem to find an answer.

What am I missing?

Editor PHP

->join(
            Mjoin::inst( 'areas' )
                ->link( 'operators.ID', 'operator_areas.operator_ID' )
                ->link( 'areas.ID', 'operator_areas.area_ID' )
                ->fields(
                    Field::inst( 'ID' )
                        ->validator( 'Validate::required' )
                        ->options( 'areas', 'ID', 'area_desc' ),
                    Field::inst( 'area_desc' ) // supports display in DataTable not Editor.
                )
        )

JS

{
                "label": "Area(s):",
                "name": "areas[].ID",
                "type": "select2",
                "opts": {
                            "placeholder": "Select Area(s)",
                            "allowClear":  true,
                            "multiple":    true,
                            "tags":        true,
                            "tokenSeparators": [',', ' ']
                }
            },

Incidentally, if I change the type to checkbox, all options are listed and the appropriate items for a given record are checked. Why would checked be set to true for a checkbox yet selected wouldn't be added to an option element? Thoughts?

clazette · February 2016

Incidentally, if I change the type to checkbox, all options are listed and the appropriate items for a given record are checked. Why would checked be set to true for a checkbox yet selected wouldn't be added to an option element? Thoughts?

allan · February 2016

I'm afraid I would need to debug the page to understand what is going wrong here. Could you link to the page so I can do so.

Thanks,
Allan

clazette · February 2016

Allan,
I don't have anything publicly available. Is there some other way I can get you the information that you need to help?

Chad

allan · February 2016

Are you able to send me a PM with a link? If so, click my name above and then "Send message".

Allan

clazette · February 2016

Allan,

I don't have a publicly available web server. If there is some other way I can assist in troubleshooting let me know. Otherwise, here is the data that I think will help you identify what I am doing incorrectly. Perhaps the mismatch between the options label/ID and the user's ID/area_desc values. I just noticed that.

If so, how do I get those in alignment or tell select2 what to use?

Thanks again!

When the DataTable is rendered, this is one particular user's JSON:

{"DT_RowId":"row_627179","ID":"627179","name":"Adam, David","first_name":"David","last_name":"Adam","badge_ID":"627179","email":"","deactive_date":null,"domain_user":"dadam","password":"blah","roles":[],"areas":[{"ID":"2","area_desc":"Front Cradle"},{"ID":"3","area_desc":"MES"},{"ID":"1","area_desc":"Support"}]}

At the end of the JSON for all users is the options information:

"options":{"roles[].ID":[{"label":"editor","value":"1"},{"label":"supervisor","value":"4"},{"label":"support","value":"3"},{"label":"team leader","value":"2"}],"areas[].ID":[{"label":"Front Cradle","value":"2"},{"label":"MES","value":"3"},{"label":"Support","value":"1"}]},"files":[]}

As you can see, this user has all three areas selected.

However, when I edit this user, the editor select2 element doesn't have anything selected.

My Editor config is as follows:

I have to imagine that I am simply missing something obvious as there is no way other's are experiencing this if it were a bug. I am doing something wrong...have to be.

var editor = new $.fn.dataTable.Editor( {
        ajax: 'php/table.Operators.php',
        table: '#Operators',        
        //"idSrc": "ID",
        fields: [
            {
                "name": "ID",
                "type": "hidden"    
            },
            {
                "name": "name",
                "type": "hidden"    
            },
            {
                "label": "First Name",
                "name": "first_name",
                "attr":  {
                            "maxlength": 50,
                            "placeholder": 'First Name'
                         }
            },          
            {
                "label": "Last Name",
                "name": "last_name",
                "attr":  {
                            "maxlength": 50,
                            "placeholder": 'Last Name'
                         }
            },
            {
                "label": "Badge ID",
                "name": "badge_ID",
                "attr":  {
                            "placeholder": 'Badge ID'
                         }
            },
            {
                "label": "Email",
                "name": "email",
                "attr":  {
                            "maxlength": 100,
                            "placeholder": 'Email'
                         }
            },
            {
                "label": "Deactive Date",
                "name": "deactive_date",
                "type": "datetime"
            },
            {
                "label": "Domain User",
                "name": "domain_user"
            },
            {
                "label": "Password",
                "name": "password",
                "type": "password"
            },
           
            {
                "label": "Area(s):",
                "name": "areas[].ID",                
                "type": "select2",                                                      
                "opts": {
                            "placeholder":     "Select Area(s)",
                            "allowClear":      true,
                            "multiple":        true//,
                            //"tags":            true,
                            //"tokenSeparators": [',', ' ']
                        }
            }, 
            {
                "label": "Role(s):",
                "name": "roles[].ID",
                "type": "checkbox"
            }
        ],
        formOptions: {
            bubble: {
                title: 'Edit',
                buttons: false
            }
        }
    } );

clazette · February 2016

Hey Allan,
Was my last comment helpful in the way of additional information? I assume it's the mismatch that I identified but I'm not sure how to reconcile the issue.

Thanks,
Chad

allan · February 2016

Hi Chad,

Sorry I wasn't able to reply over the weekend. The details you added above really suggest that this should work without modification.

I'll need to use the above to try and set up a local example and see if I can reproduce the issue. I'll post back when I've been able to do that.

Allan

clazette · February 2016

Allan,
No apology necessary. I just appreciate the help. If you have any other questions or if there is any additional information I can provide, please don't hesitate to ask. This is the last item pinning me down for this implementation. So, your assistance is very helpful.

Talk to you soon,
Chad

clazette · February 2016

Allan,
I identified the issue while cleaning up script includes. I need to do some more research in order to identify exactly which change resolved the issue. I will let you know what I find.

I apologize for the overhead and I hope you haven't spent a bunch of time on this since it appears that I had done something wrong.

I will see what I can find and let you know but I wanted to tell you in case you were attempting to isolate the issue.

Chad

allan · February 2016

Hi Chad,

Thanks for posting back - great to hear you have this up and running now! It was first thing to do on my list today after a once over in the forum.

Would be interested to hear what the issue was if you get a chance to dig into it.

Regards,
Allan

clazette · February 2016

Allan,
I'm glad you didn't waste any more time on my issue. So far, I have not identified what I had done incorrectly but, if/when I do, I will post the information in the hopes that it solves someone else, including you, some angst in the future.

Thanks again,
Chad

Select input type selected values.

Select input type selected values.

Answers

Howdy, Stranger!

Categories

DataTables

Select input type selected values.

Select input type selected values.

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables