title: How do I submit form data to my Ruby Controller via Ajax?
body: <p>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.</p>
  
  <pre><code> &lt;%= semantic_form_for current_coach, :remote =&gt; true, :html =&gt; { :class =&gt; "custom-form rb-form", :id =&gt; "filter", :'data-url' =&gt; "#{roster_builder_coach_index_path}" } do |f| %&gt;
    &lt;div class="filter_parent_container"&gt;
      &lt;% @search.conditions.each do |condition| %&gt;
          &lt;%= render "filter", :condition =&gt; condition %&gt;
      &lt;% end %&gt;
    &lt;/div&gt;
  
    &lt;div class="bottom-info"&gt;
      &lt;div class="count"&gt;
        &lt;p class="num"&gt;&lt;%= @athletes.count %&gt;&lt;/p&gt;
        &lt;p&gt;identified with this filter set&lt;/p&gt;
      &lt;/div&gt;
      &lt;input type="submit" class="send-request" id="search-button" value="" /&gt;
      &lt;input type="button" class="add_filter" value="Add Another Filter" /&gt;
    &lt;/div&gt;
    &lt;div class="cl"&gt;&amp;nbsp;&lt;/div&gt;
  &lt;% end %&gt;
  </code></pre>
  
  <p>I need the form to submit via ajax, but it isn't. I'm checking the params in the controller and they are:</p>
  
  <pre><code>{"action"=&gt;"roster_builder", "controller"=&gt;"coach"}
  </code></pre>
  
  <p>Here's the controller (logger is checking the params):</p>
  
  <pre><code>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
  </code></pre>
  
  <p>Here is the Ajax call:</p>
  
  <pre><code>$("#filter").submit(function(){
    $.ajax({
      url: $("#filter").attr("data-url"),
      type: 'POST',
      success: function(data) {
        $(".results")[0].parentNode.removeChild($(".results")[0]);
      }
    });
  });
  </code></pre>
  
  <p>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:</p>
  
  <pre><code>$.ajax({
    url: $("#filter").attr("data-url"),
    type: 'POST',
    data: $("form#filter").serialize(),
    success: function(data) {
      $(".results")[0].parentNode.removeChild($(".results")[0]);
    }
  });
  </code></pre>
  
  <p>Any help would be appreciated!</p>