[英]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. 在我的rails应用程序中,我通过AJAX提交一系列表单-通常是通过模式提交。 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. 这将提取所有错误消息,并通过render_form_errors
函数运行它们,然后将错误发布到表单上的错误块。
In order to render the code in a more attractive way I've started using "form_tag" submission in Rails: 为了以一种更具吸引力的方式呈现代码,我开始在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 %>
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. 这段代码的结果是, submit_tag
不在生成的html的表单中-使用form_for
方法时,它form_for
。 As such my Jquery doesn't bind to the submit action, and the code: 因此,我的Jquery不会绑定到Submit操作和代码:
$(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. 也不起作用-因为使用form_tag时整个表单具有一组不同的ID和类,并且它们不能像Rails生成整个表单时那样有机地组合在一起。
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? 谁能建议一个Jquery方法在提交时抓住最接近表单组的提交按钮,然后在存在AjaxError的情况下将此操作绑定到它?
Do let me know if you need more info to help out. 如果您需要更多信息以帮助您,请告诉我。
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: 感觉有点“ hacky”,但是由于上面发布了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) );
});
});
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. 如果我可以从html中提取此信息,那就更好了-我觉得将来不易被破坏。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.