Question

I am developing on Rails 3.0.3 and using jQuery. Here is my javascipt include tag:

<%= javascript_include_tag "http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js", "rails.js" %>

I want to send a JS request on change of a dropdown and wrote the following code to do so. This form does not get processed as JS, but is getting processed as an HTML request instead:

<% form_tag(aggregatedata_path, :method=>'post', :id => "dd-container", :remote => true ) do %>
    <%= select_tag( 
        :group, 
        options_for_select(groups_list, @group), 
        {
            :id => "dd", 
            :onchange => "this.form.submit();"
        } ) %>
<% end %>

I read a similar post on SO that suggested the problem was the js library, but unless there’s no other way, I’d rather avoid changing that at this point lest a million other things break. I have another form that gets processed as a JS request just fine. Here it is:

<% form_tag(poweroutput_path, :method=>'post', :id => "date-form", :remote => true ) do %>
    <%= text_field_tag(
        'dt', nil,
        {  
            :id => 'date-field',
            :class => 'dateformat-d-dt-m-dt-Y',
            :value => Time.now.getlocal.strftime("%d.%m.%Y")             
        }) %>
    <%= submit_tag " ", :id => "go-button" %>
<% end %>

The only obvious difference I see is that the first one uses :onchange => "this.form.submit();" while the second does not. Is there something in that function that overrides my earlier :remote => true?

Answer 1

I agree with Dave. Since you are already using jQuery, I’d go with something like this:

$('#dd-container').change(function(){
  $.ajax({
    type: "POST",
    url: your_path,
    data: $(this).find('option:selected').attr('value'),
    success: function( response ) {
      console.log( response );
    }
  });
});

Oh, and don’t forget to remove the :onchange => "this.form.submit();" and , :remote => true from your form.