Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now

Select2 + AJAX (Data from API)

I am using the contro select2 and I am trying to load my data through ajax, however I have not succeeded:


$('#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,
 }
});

and this is another example that does work, but my desire is that it works through the ajax load:

$.getJSON('http://myapi.test:8181/api/sat/catalogos/regimenfiscal', function (data) {
 let options = data.map(item => ``);
 $('#select2_sat_regimenfiscal').append(options);
});

Could someone help me with the correction of my code or with some example of select2+ajax?

thank you very much

Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (5)


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:


Regards,
Sean



The problem is that if I remove

data-control="select2"

from the select it works without problem



...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


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(