CODEWITHSUNDEEP
jqueryruby-on-railsajaxformsujs
Zoinks10
Zoinks10

Reputation: 629

How do I bind a Jquery submit to a form_tag form submission action in rails

In my rails app I'm submitting a range of forms via AJAX - normally via a modal. In order to do so I use the following code:

$(document).ready(function(){
  $(form).on('submit', function(event) {
  form = $(this).attr('id');
  selector = $('form#' + form)
  $(document).bind('ajaxError', selector, function(event, jqxhr, settings, exception){
    // note: jqxhr.responseJSON undefined, parsing responseText instead
    $(event.data).render_form_errors( $.parseJSON(jqxhr.responseText) );
  });
});

This pulls any error messages and runs them through the render_form_errors function which then posts the errors to an error block on the form.

In order to render the code in a more attractive way I've started using "form_tag" submission in Rails:

 <%= form_tag('/sale_qualifiers', method: :post, remote: true) do -%>
    <%= fields_for :sale_qualifier do |ff| %>
    <%= ff.hidden_field :sales_opportunity_id, :value => @sales_opportunity.id %>
        <%= ff.hidden_field :question_id, :value => @question.id %>
          <tr id="form#sale_qualifier_submit">
            <td><%= @question.question_text %></td>
        <td>
        <%= ff.fields_for :answer_attributes do |answer| %>
            <div class="form-group">
            <% if @question.answer_type == 'Text Field' %>
                <%= answer.text_area :answer_text, :placeholder => "Enter your answer"%>
            <% end %>
            <% if @question.answer_type == 'Datetime' %>
                <div class='input-group date' id='datetimepicker' data-date-format="YY.MM.DD">
                <%= answer.text_field :answer_text, class: "form-control", data: { date_format: 'YYYY/MM/DD' }, :placeholder => "YYYY/MM/DD" %>
                <span class="input-group-addon">
                <span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>
        <% end %>
        <% if @question.answer_type == 'Boolean' %>
            <%= answer.select :answer_text, [['Yes', true], ['No', false]] %>
        <% end %>
            <span class="warning-block"></span>
            <span class="help-block"></span>
            </div>
        <% end %>
            </td>
            <td>
                <%= submit_tag "Submit", class: "btn btn-large btn-success", id: "sale_qualifier_submit", data: { disable_with: "Submitting..." }, autocomplete: 'off' %>
            </td>
        </tr>
    <% end %>     
<% end %>

The result of this code is that the submit_tag does not sit within the form in the produced html - which it does when the form_for method is used. As such my Jquery doesn't bind to the submit action, and the code:

$(form).on('submit', function(event) {
  form = $(this).attr('id');
  selector = $('form#' + form)

Doesn't work either - because the entire form has a different set of ids and classes when using form_tag and they don't fit together organically like they do when Rails produces the entire form.

Can anyone suggest a Jquery method to grab the closest form-group to the submit button on submit, then bind this action to it if there's an AjaxError?

Do let me know if you need more info to help out.

Upvotes: 0

Views: 883

Answers (1)

Zoinks10
Zoinks10

Reputation: 629

It feels a bit "hacky" but I've gotten this working thanks to the link Geoffroy posted above and by just directly targeting my form:

$('form').on('submit', function(event) {
$(document).bind('ajaxError', 'form#new_sale_qualifier', function(event, jqxhr, settings, exception){
    // note: jqxhr.responseJSON undefined, parsing responseText instead
    $(event.data).render_form_errors( $.parseJSON(jqxhr.responseText) );
  });
});

Explicitly declaring the correct selector to bind the event to. It would be nicer if I could extract this info from the html - I feel it would be less susceptible to breaking in the future.

Upvotes: 1

Related Questions