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



在我的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 函数运行它们,然后将错误发布到表单上的错误块。

为了以更具吸引力的方式呈现代码,我开始在 Rails 中使用"form_tag"提交:

 <%= 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时将此操作绑定到它?

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

感觉有点"笨拙",但由于上面发布的 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 中提取这些信息会更好 - 我觉得将来它不太容易被破坏。

最新更新