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

Question

I am using select2 plugin to load deleted data. I am using an aspx page that returns JSON data and is also assigned to the select2 plugin. After the user selects a value from the select2 text box, I force the page to return back. After the postback, I use the following code to reload to set the text in the select2 text box.

var data = { "PatientID": "XYX", "Email": " [e-mail] " }; $('#e6').select2('val', '123'); 

But the system throws the following error: cannot call val() if initSelection() is not defined

Even if I define init, I cannot set the value. I am using the following code. Please help me set the value in select2 textbox after 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 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": " [e-mail] " }; 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": " [e-mail] " }; //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(); }); }); 

Answer 1

you are wrong! I ran into this problem and I saw that you doubt it. Then I read the Select2 API docs and found that I was wrong. Host a parallel initSelection with ajax.like:

 $("#e6").select2({ placeholder: "Search for a movie", minimumInputLength: 1, initSelection: function (element, callback) { var data = { "PatientID": "XYX", "Email": " [e-mail] " }; callback(data); }, ajax: { // instead of writing the function to execute the request we use Select2 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 }; }, }, });