cannot call val() if initSelection() is not defined error in select2 plugin

javascript, jquery, jquery-plugins, jquery-select2

Solution

There is a mistake with your script. I had the same problem and I saw your question. After I read the API docs of Select2 I realised my error.

You should place the `initSelection` at the same level as `ajax`. e.g.

$("#e6").select2({
        placeholder: "Search for a movie",
        minimumInputLength: 1,
        initSelection: function (element, callback) {
                var data = { "PatientID": "XYX", "Email": "testing@gmail.com" };
                callback(data);
            },
        ajax: { // instead of writing the function to execute the request we use Select2's convenient helper
            url: "data.aspx", 
            dataType: 'json',
            quietMillis: 1000,
            data: function (term, page) {
                return {
                    name: term
                };
            },


            results: function (data) {
                var results = [];
                $.each(data, function (index, item) {
                    results.push({
                        id: item['Email'],
                        text: item['PatientID']
                    });
                });
                return {
                    results: results
                };
            },
        },
    });

Problem

I am using select2 plugin to load remote data. I am using an aspx page which returns JSON data and same is assigned to select2 plugin. After user selects some value from the select2 textbox, i am forcing page to postback. After the postback i am using following code to reload to set the text in the select2 textbox. ``` var data = { "PatientID": "XYX", "Email": "testing@gmail.com" }; $('#e6').select2('val', '123'); ``` But system is throwing following error: `cannot call val() if initSelection() is not defined` Even if I define init, I am not able to set the value. I am using following code. Please help me set the value on the select2 textbox after the postback. ``` $(document).ready(function () { $("#e6").select2({ placeholder: "Search for a movie", minimumInputLength: 1, ajax: { // instead of writing the function to execute the request we use Select2's convenient helper url: "data.aspx", dataType: 'json', quietMillis: 1000, data: function (term, page) { return { name: term }; }, initSelection: function (element, callback) { var data = { "PatientID": "XYX", "Email": "testing@gmail.com" }; callback(data); }, results: function (data) { var results = []; $.each(data, function (index, item) { results.push({ id: item['Email'], text: item['PatientID'] }); }); return { results: results }; }, }, }); }); window.onload = function () { var data = { "PatientID": "XYX", "Email": "testing@gmail.com" }; //When this is called system is throwing error //This code is required to show the value in select2 textbox after the post back $('#e6').select2('val', data); } $(document).ready(function () { $("#e6").on("select2-selecting", function (e) { //alert("selecting val=" + e.val + " choice=" + JSON.stringify(e.choice)); var id = document.getElementById('<%= savebtn.ClientID %>'); document.getElementById('<%= hdnFld.ClientID %>').value = e.val; id.value = e.val; //causes post back id.click(); }); }); ```

Original source