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": "[email protected]" };

            $('#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": "[email protected]" };
                    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": "[email protected]" };
        //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();

        });
    });

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": "[email protected]" };

            $('#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": "[email protected]" };
                    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": "[email protected]" };
        //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();

        });
    });

• javascript
• jquery
• jquery-plugins
• jquery-select2

• 4 initSelection should not be inside the ajax-property. – user1983983 Commented Aug 22, 2013 at 10:15

1 Answer 1

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": "[email protected]" };
                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
                };
            },
        },
    });