Using RoR form_for with collection_select

Question

In a form_for @estimate, I'm using collection_select to give me a dropdown of the names of leads in a 'leads' table

    <%= form_for(@estimate) do |f| %>

    <div class="field">
      <%= f.label "Lead" %><br>
      <%= f.collection_select :lead_id, @leads, :id, :full_name, prompt: true %>
    </div>
    ...

the options for the select tag are populating correctly with the leads. I'm using jQuery's .getJSON method to retrieve data from the option selected

    $(document).on('change', 'select#estimate_lead_id', function(e) {
      var url = "/leads";
      var data = {
        id: $(this).val()
      };
      $.getJSON(url, data, function (data, status) {        
        if (status === 200) {
          return data
          console.log(data);
          alert("THIS IS WORKING!");        
        };
      });
     });

However, I can't get this to work. here are my server logs - it appears to be accessing the database.

    Started GET "/leads?id=23" for 127.0.0.1 at 2016-07-02 23:29:29-    0500
    Processing by LeadsController#index as JSON
    Parameters: {"id"=>"23"}
    Lead Load (1.1ms)  SELECT "leads".* FROM "leads"
    Rendered leads/index.html.erb within layouts/application (10.4ms)
    User Load (0.7ms)  SELECT "users".* FROM "users" WHERE "users"."id" = 1 LIMIT 1
    Completed 200 OK in 51ms (Views: 47.6ms | ActiveRecord: 1.8ms)

I'm selecting a name from the leads database with the id = 23, but nothing logging to the console, and no alert. I want to use the data to populate fields in the estimates form. What am I doing wrong?

Answer 1

I have the same problem before, when dealing with asynchronous task. What I did was instead separately calling the onchange function, I call it inside the select tag:

it would look like this:

<select onchange="myfunction(parameterIfneeded)"> 
....
</select>

then in my js function:

function myfunction(param) {
       ..............
       .......
     //PROCESS your AJAX here
}