如何将Jquery提交绑定到rails中的form_tag表单提交操作

时间:2016-03-29 14:56:42

标签: jquery ruby-on-rails ajax forms ujs

在我的rails应用程序中,我通过AJAX提交一系列表单 - 通常是通过模式提交。为此,我使用以下代码:

$(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) );
  });
});

这会提取任何错误消息并通过render_form_errors函数运行它们,然后将错误发布到表单上的错误块。

为了以更具吸引力的方式呈现代码,我已经开始使用" form_tag"在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 %>  

此代码的结果是submit_tag不在生成的html中的表单中 - 它在使用form_for方法时执行。因此,我的Jquery不会绑定到提交操作和代码:

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

也不起作用 - 因为整个表单在使用form_tag时有一组不同的id和类,并且它们不像Rails生成整个表单时那样有机地组合在一起。

任何人都可以建议使用Jquery方法将最接近的表单组抓取到提交时的提交按钮,然后如果存在AjaxError则将此操作绑定到它吗?

如果您需要更多信息以帮助我,请告诉我。

1 个答案:

答案 0 :(得分:1)

感觉有点&#34; hacky&#34;但是由于Geoffroy上面发布的链接以及直接针对我的表单,我已经得到了这个工作:

$('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) );
  });
});

明确声明将事件绑定到的正确选择器。如果我能从html中提取这些信息会更好 - 我觉得它将来不太容易破坏。