Select2 with Ajax does not send a request

I am using Select2 version 4.0.0 and trying to load remote JSON with a PHP script that returns the already generated data that I need. The problem is that the forces of darkness are doing something, because I just can’t send a request, there is no error, but there is no request sent, it is just as quiet as the devil that I almost cry!

I use LiveScript and Jade as alternatives to JavaScript and HTML, but I will translate here.

First, my markup defines a selectable field:

<select id="satan-hates-me"></select> 

Then I can make it look like a selectable item:

  $("#satan-hates-me").select2({ placeholder: "Hail", minimumInputLength: 1, ajax: { // Here that bad things happen, I mean, don't happen url: "http://localhost/os/backend/TestServiceOrder.php?req=getEquipments", dataType: "json", type: "GET", quietMillis: 50, data: function(term) { return { term: term } }, results: function(data) { return data; } } }); 

I do this, wrapped in a download function, after loading the page it looks like selectable, but does not send any requests, and the script returns me the exact format needed, for example

 [{id: 1, text: "Sadness"}, {id: 2, text: "Depression"}] 

And here it goes. I can design compilers, but I cannot make a plug-in with Ajax in the world! Can someone help me please?

+10
javascript jquery ajax jquery-select2
source share
3 answers

Finally solved the problem.

<input> not supported in select2 v4

. Instead, you should use the <select> element

+18
source share

In my case, it was a generic call to select2.select2-Elements in the footer of all my templates:

 $('.select2').select2(); 

Despite the fact that my choice for Ajax-Request did not have this class at all (I called it by identifier), I had to change the above to

 $('select.select2').select2({theme: 'classic'}); 

I think select2 () creates several elements with the class .select2, so this may interfere

0
source share

Just today I started using this plugin.

Try replacing this:

 data: function(term) { return { term: term } } 

:

 data: function(term) { return { term: term.term } } 

But in any case .. the request should be sent even if the data was transferred incorrectly ...

-one
source share

All Articles