I am using the contro select2 and I am trying to load my data through ajax, however I have not succeeded:
<select id="select2_sat_regimenfiscal" class="form-select form-select-lg" data-control="select2" data-allow-clear="true" data-placeholder="Régimen Fiscal">
<option></option>
</select>
$("#select2_sat_regimenfiscal").select2({
language: "es",
theme: "bootstrap4",
multiple: false,
minimumResultsForSearch: 1,
allowClear: true,
ajax: {
url: "http://myapi.test:8181/api/sat/catalogos/regimenfiscal",
delay: 250,
dataType: "json",
processResults: function (data) {
return {
results: data
};
},
cache: true,
}
});
$.getJSON("http://myapi.test:8181/api/sat/catalogos/regimenfiscal", function (data) {
let options = data.map(item => `<option value="${item.id}">${item.text}</option>`);
$("#select2_sat_regimenfiscal").append(options);
});
Hi,
Metronic uses Select2 as it is with custom style only so all available ajax options and plugins features you can check in the plugin's official documentation here:
https://select2.org/data-sources/ajax
Regards,
Sean
The problem is that if I remove
data-control="select2"
...Obviously it works, but without the stylings of Metronic
Hi,
For custom data source you will need to apply your own styling.
Please provide us your select2 example code that works already with your remote data via https://gist.github.com/ and we will give you some direction regarding the styles.
Regards,
Sean
Everything is working, what I did was to initialize my select2 inside:
KTUtil.onDOMContentLoaded(function () {
//Initialize select2 here...
});
Thanks
Regards