Clever Geek Handbook

Select2 multiple initial preselected parameters

I am trying to get select2 working with multiple preselected options. I use it so that users can select multiple options and then save them so they can go back and edit them. however, I cannot get the select2 initSelection to work properly to populate the existing options that the user has already selected. here is the code i tried with warnings to show when something fired, however warning ("done"); never fires, and the warning ($ (element) .val (0) fires twice. once with a value in the input and then again with a space.

<input type="text" id="Commissioners" name="Commissioners" value="test" />

$("#Commissioners").select2({
                placeholder: 'Select Commissioners',
                minimumInputLength: 2,
                allowClear: true,
                multiple: true,
                width: 'resolve',
                ajax: {
                    url: "/Commissioner/CommissionerAutoComplete/",
                    dataType: 'json',
                    data: function (term, page) {
                        return {
                            search: term // search term
                        };
                    },
                    results: function (data) {
                        return { results: data };
                    }
                },
                initSelection: function (element, callback) {
                    // the input tag has a value attribute preloaded that points to a preselected make id
                    // this function resolves that id attribute to an object that select2 can render
                    // using its formatResult renderer - that way the make text is shown preselected
                    alert($(element).val());
                    $.ajax({
                        url: "/UserProfile/LoadServiceTypeAndCommissioners",
                        type: "GET",
                        dataType: "json",
                        data: { UserId: '@Model.UserID', serviceTypeId: id}                            
                    }).done(function (data) {
                        alert("done");
                        callback(data.results);
                    });

                },
                formatResult: s2FormatResult,
                formatSelection: s2FormatSelection
            }).select2('val', []);



I figured out that the second alert fires for the .select2('val', []); at the end. however removing this causes the placeholder to not work and adding in a value here like ["1"] does not result in a selected item
+3


source to share


2 answers


it turns out that it was a combination of things that prevented it from working. I didn't return the code from the ajax call as a json object, but I just didn't fix that. I had to add success and error parameters to the ajax call with the call to return to success. strangely, I still needed to save the .done with its callback.



$("#Commissioners").select2({
                placeholder: 'Select Commissioners',
                minimumInputLength: 2,
                allowClear: true,
                multiple: true,
                width: 'resolve',
                ajax: {
                    url: "/Commissioner/CommissionerAutoComplete/",
                    dataType: 'json',
                    data: function (term, page) {
                        return {
                            search: term // search term
                        };
                    },
                    results: function (data) {
                        return { results: data };
                    }
                },
                initSelection: function (element, callback) {
                    // the input tag has a value attribute preloaded that points to a preselected make id
                    // this function resolves that id attribute to an object that select2 can render
                    // using its formatResult renderer - that way the make text is shown preselected
                    //alert($(element).val());
                    $.ajax({
                        url: "/UserProfile/LoadServiceTypeAndCommissioners",
                        type: "GET",
                        dataType: "json",
                        data: { UserId: '@Model.UserID', serviceTypeId: id },
                        success: function (data) {                                
                            callback(data);
                        },
                        error: function (data) {

                        }
                    }).done(function (data) {                            
                        callback(data.results);
                    });

                },
                formatResult: s2FormatResult,
                formatSelection: s2FormatSelection
            }).select2('val', ["1"]);
+1


source


Here's the problem I see here: It $.ajax

takes a while to receive data and the constructor select2

doesn't wait to be installed initSelection

.



Try to move the ajax call from select2 initialization to a function and call it right after select2 initialization

0


source






More articles:


All Articles