Hi, hopefully someone is able to help me with an issue as i’m currently stuck with fixing it.
I’ve been encountering an issue with my select2 dropdown inside a bootstrap modal. When the dropdown is moved outside the modal the ajax loading works.
Error: jQuery.Deferred exception: this.generateResultId is not a function TypeError: this.generateResultId is not a function
Site is made of asp.net webforms, uses jquery 3.7.1, and uses Select2 4.1.0.
(even if I initialize the select2 after all dom are loaded or even on modal shown to make sure that everything is loaded, still same issue)
select2 init:
$(’#JobsDropdown’).select2({
ajax: {
type: ‘POST’,
url: ‘GetJobsOptions’,
dataType: ‘json’,
contentType: “application/json; charset=utf-8”,
delay: 250,
data: function (params) {
return JSON.stringify({
clientId: 123
jobStatus: ‘0’,
divisionId: 0,
businessUnitId: 0,
searchTerm: params.term || ‘’,
pageNumber: params.page || 1
});
},
processResults: function (data, params) {
params.page = params.page || 1;
var _jobs = JSON.parse(data.d)
return {
results: _jobs.items,
pagination: {
more: (params.page * 5) < _jobs.total_count
}
};
},
error: function (response) {
alert(response.responseText);
},
cache: true
},
placeholder: "Select a Job",
minimumInputLength: 0,
allowClear: true,
language: {
noResults: function () {
return "No Jobs found";
}
},
dropdownParent: $("#roleAppointmentModal")
});