在我的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 中提取这些信息会更好 - 我觉得将来它不太容易被破坏。