Select2 Resets After Grabbing Value

Select2 Resets After Grabbing Value

SchautDollarSchautDollar Posts: 20Questions: 5Answers: 1

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

Answers

  • allanallan Posts: 50,842Questions: 1Answers: 7,620 Site admin

    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

  • SchautDollarSchautDollar Posts: 20Questions: 5Answers: 1
    edited August 12

    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

  • allanallan Posts: 50,842Questions: 1Answers: 7,620 Site admin

    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

  • SchautDollarSchautDollar Posts: 20Questions: 5Answers: 1

    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

  • SchautDollarSchautDollar Posts: 20Questions: 5Answers: 1

    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

Sign In or Register to comment.