Select2 Resets After Grabbing Value

SchautDollar

Hello,

I am having an issue after retrieving a value from Select2 via the API.

I have two (2) Select2 fields both setup with Ajax as the data retriever. You must select a Client first before you can select a Rack Card. The Rack Card pulls information based on the selected Client. That works great. The issue I am having is if you want to select a different Client after selecting a Rack Card, the Client field won't retrieve the list from the server. It only displays the options selected previously before selecing a Rack Card.

Here is the applicable code:

gEditorPendingRackCard = new $.fn.dataTable.Editor({
        ajax: {
            url: "/editable/PendingRackCard",
            type: "POST"
        },
        formOptions: {
            main: {
                onBackground: false
            }
        },
        serverSide: true,
        fields: [
            {
                label: "Client",
                name: "pending_rack_cards.client_id",
                type:"select2",
                opts: {
                    ajax: {
                        url: "/data/Client",
                        method: 'POST',
                        dataType: 'json',
                        contentType: 'json',
                        delay: 250,
                        data: function (p) {
                            var params = {
                                action: "list",
                                data:{
                                    where: [
                                        {
                                            field: "name",
                                            value: "%" + p.term + "%",
                                            operator: "LIKE"
                                        }
                                    ],
                                    include_object_fields: false
                                }
                            };
                            return JSON.stringify(params);
                        },
                        processResults: function (data) {
                            return {
                                results: $.map(data.data.items, function (item) {
                                    return {
                                        id: item.fields.id,
                                        text: item.fields.name
                                    }
                                })
                            };
                        }
                    },
                    minimumInputLength: 2,
                    placeholder: "Select Client",
                    allowClear: true,
                    multiple: false
                }
            },
            ...
            {
                label: "Rack Card",
                name: "pending_rack_cards.rack_card_id",
                type:"select2",
                opts: {
                    ajax: {
                        url: "/data/RackCard",
                        method: 'POST',
                        dataType: 'json',
                        contentType: 'json',
                        delay: 250,
                        data: function (p) {


                            var params = {
                                action: "list",
                                data:{
                                    where: [
                                        {
                                            field: "client_id",
                                            value: gEditorPendingRackCard.field('pending_rack_cards.client_id').inst().val(),
                                            operator: "="
                                        }
                                    ],
                                    include_object_fields: false
                                }
                            };
                            if(p.term && p.term !== ""){
                                params.data.where.push( {
                                            field: "name",
                                            value: "%" + p.term + "%",
                                            operator: "LIKE"
                                        });
                            }
                            return JSON.stringify(params);
                        },
                        processResults: function (data) {
                            return {
                                results: $.map(data.data.items, function (item) {
                                    return {
                                        id: item.fields.id,
                                        text: item.fields.name
                                    }
                                })
                            };
                        }
                    },
                    placeholder: "Select Rack Card",
                    allowClear: true,
                    multiple: false
                }
            }
            ...
        ]
    });

From what I can deduce, I believe the following line is causing me my issues.

gEditorPendingRackCard.field('pending_rack_cards.client_id').inst().val()

If I do not call that, I can continue to select a different client, but once I call that above method, it no longer works as expected.

Is there an alternative way for me to pull the information I need or is this a bug? In some other instances, I want to access the Select2 field to get other attributes that I can set during processResults

Note: This is a standalone editor - no table associated for this.

Thank you,
Ryan

allan

Hi Ryan,

dependent() is the way to tie two fields together - in this case the rack on the client. Then any change to the client will also trigger an update on the rack field.

Allan

SchautDollar

Hello Allan,

Thank you for your response. I agree, I'd prefer to use dependent(). Unfortunately, dependent() does not trigger when allowClear: true and the user clears the entry. dependent() also does not pass through the other attribute fields that I sometimes need from the select2 option.

For example:

I may want to pass a client_id so I know if the child is still valid being associated with it's parent.

processResults: function (data) {
        return {
            results: $.map(data.data.items, function (item) {
                return {
                    id: item.fields.id,
                    text: item.fields.name
                    client_id: item.fields.client_id
                }
            })
        };
}

What I would like to do is during dependent(), ensure that the client_id matches up with the first selected Client. If not, then clear the RackCard.

Do you have any suggestions on how to best proceed?

Thank you,
Ryan

allan

I just had a look to see what the story is with this and it looks like allowClear does not automatically trigger a change event.

So what you could do with dependent() is make use of its event option which tells it what events to listen for:

editor.dependent( 'fieldName', 'action', {
  event: 'change select2:unselecting'
} );

Allan

SchautDollar

Hello Allan,

This is good to know. Thank you. I appreciate you helping me.

How do you suggest that I reference the select2 additional options?

On the dependent method, I'd like to have a condition based off of the client_id from the RackCard field. I get the ID, but not the additional fields.

Thank you,
Ryan

SchautDollar

Hello,

I just wanted to attach a related example. This is where I got the suggested way of using gEditorPendingRackCard.field('pending_rack_cards.client_id').inst().

Thank you,
Ryan