Volz Volz - 5 months ago 21
jQuery Question

Select_tag doesn't get data from json response

Problem



Please read edit, it's little cleaner.

select_tag using Select2 not getting/sending ajax requests.

I'm trying to get data for my
select_tag
using ajax because there's a lot of rows in table.

<h3> Ajax send requests but I have Client.all </h3>
<%= invoice_form.collection_select :client_id, Client.all, :id, :name %>

<h3> Ajax not working </h3>
<input id="invoice_seller_id" />


These tags are used with Select2 library to replace select boxes.

This is how it look in browser:
enter image description here

First
input
generated from
<%= invoice_form.collection_select :client_id, Client.all, :id, :name %>
send correct json requests and even get correct response.

enter image description here

But there is info that not results found.

In second approach browser doesn't even send ajax request.

Code



invoices/_form.html.erb

<h3> Ajax send requests but I have Client.all </h3>
<%= invoice_form.collection_select :client_id, Client.all, :id, :name %>

<h3> Ajax not working </h3>
<input id="invoice_seller_id" />


invoice.js.coffee

jQuery ->
$('#invoice_client_id').select2
theme: 'bootstrap'
ajax:
url: '/clients.json'
dataType: 'json'
results: (data, page) ->
{ results: $.map(data, (client, i) ->
{
id: client.id
text: client.name
}
) }

$('#invoice_seller_id').select2
theme: 'bootstrap'
ajax:
url: '/clients.json'
dataType: 'json'
results: (data, page) ->
{ results: $.map(data, (client, i) ->
{
id: client.id
text: client.name
}
) }


Question



Why in first input results are not inserted into select_tag. Why second input doesn;t send any requests?

I was trying recreate this: Using Select2 with Ruby on Rails

Edit 1



I changed these two inpu fields just for one.

<h3> Ajax not working </h3>
<%= invoice_form.collection_select :seller_id, [], :id, :name %>


It's now sending ajax requests and get correct response but don't insert data to select options and still shows No results found

Answer

Select2 only works for select input tag. In second option you are just applying select2 on input which is not select tag that's why it's not working.

Now why Result is not showing in select2.

Please be noted that select2 expects the response in the form of

[{id: 1,text: 'Option1'},{id: 2,text: 'Option2'}] If the response is not like the above format then you need to processResults at client side. You are trying to do it but it appears you are choosing wrong option. You need to define processResult so here is the script to do it. You can find more details Select2 Ajax FAQ

jQuery ->
  $('#invoice_client_id').select2
    theme: 'bootstrap'
    ajax:
      url: '/clients.json'
      dataType: 'json'
      processResults: (data) -> 
        return {
        results: $.map(data, (client, i) ->
          {
            id: client.id
            text: client.name
          }
       )}

I hope this works.

P.S Please be noted that when you are using remote option of select2 it's expected that you will filter the results on server side so select2 will display all of the returned results.

Comments