How do I submit form data to my Ruby Controller via Ajax?

Question

I have a semantic_form_for in my view that sets up a search filter, and more filters are added with a button that, through JavaScript, adds more filters.

 <%= semantic_form_for current_coach, :remote => true, :html => { :class => "custom-form rb-form", :id => "filter", :'data-url' => "#{roster_builder_coach_index_path}" } do |f| %>
  <div class="filter_parent_container">
    <% @search.conditions.each do |condition| %>
        <%= render "filter", :condition => condition %>
    <% end %>
  </div>

  <div class="bottom-info">
    <div class="count">
      <p class="num"><%= @athletes.count %></p>
      <p>identified with this filter set</p>
    </div>
    <input type="submit" class="send-request" id="search-button" value="" />
    <input type="button" class="add_filter" value="Add Another Filter" />
  </div>
  <div class="cl">&nbsp;</div>
<% end %>

I need the form to submit via ajax, but it isn't. I'm checking the params in the controller and they are:

{"action"=>"roster_builder", "controller"=>"coach"}

Here's the controller (logger is checking the params):

def roster_builder
authorize! :access_roster_builder, current_coach

logger.info("**************");
logger.info("**************");
logger.info("**************");
logger.info("**************");
logger.info("**************");
logger.info(params);
@search = Search.new(sport: current_coach.primary_sport, conditions: params[:search])
@athletes = @search.query.page(params[:page]).per_page(8)

render "athletes" if request.format.js?
end

Here is the Ajax call:

$("#filter").submit(function(){
  $.ajax({
    url: $("#filter").attr("data-url"),
    type: 'POST',
    success: function(data) {
      $(".results")[0].parentNode.removeChild($(".results")[0]);
    }
  });
});

Before I used :remote => true, it was working, but I need persistence across the filters (including the ones added via JS), so I need Ajax to perform the search rather than doing a page refresh. Why isn't params working now that Ajax is sending the form data? I even tried sending the data via Ajax as serialized, to no avail, as follows:

$.ajax({
  url: $("#filter").attr("data-url"),
  type: 'POST',
  data: $("form#filter").serialize(),
  success: function(data) {
    $(".results")[0].parentNode.removeChild($(".results")[0]);
  }
});

Any help would be appreciated!

I suggest you try handling the errors to at least see what kind of error you are getting. Maybe you could monitor (in the Networking tab of Chrome dev tools) to see if a call is actually fired. — mart1nn
– mart1nn, Commented Mar 14, 2013 at 16:22

Robin · Accepted Answer · 2013-03-14 16:24:04Z

2

Do not use both remote: true AND an ajax call in the submit event of the form.
If you make the ajax call yourself, then you will definitely need to pass the params with data: $("form").serialize()
You have to return false, or do e.preventDefault() in the submit event, because you don't actually want the form to be submitted, since you're sending the data yourself with the ajax call.
this plugin to handle ajax forms is great: http://www.malsup.com/jquery/form/

answered Mar 14, 2013 at 16:24

Robin

22k10 gold badges66 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

trevorhinesley Over a year ago

Thanks! Took out my JS and simply used remote: true, dumb mistake!

Collectives™ on Stack Overflow

How do I submit form data to my Ruby Controller via Ajax?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related