在我的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则将此操作绑定到它吗?
如果您需要更多信息以帮助我,请告诉我。
答案 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中提取这些信息会更好 - 我觉得它将来不太容易破坏。