Select2 AJAX Inside Bootstrap Modal

#1

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")
    });