Databases
StackOverflow2013
Postsdbo
POHow do I submit form data to my Ruby Controller via Ajax?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow do I submit form data to my Ruby Controller via Ajax?
    text
    copied!<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>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload