如何在不刷新页面的情况下重新加载Ajax

Question

当焦点不在时，我正在尝试更新simple_form。 我这样做了，但是我只能做一次，而且我不知道如何使它适用于所有输入表单。 这是我的代码：

<%= content_for :after_js do %>
<%= javascript_include_tag 'autocomplete-rails-custom' %>
<script>
var autocomplete_field = $('#user_job_name')

autocomplete_field.on('focus', function(){
  console.log('focus')
  var search = 'A'
  if (autocomplete_field.val() && autocomplete_field.val().length > 0) {
    search = autocomplete_field.val()
  }
  autocomplete_field.autocomplete( 'search', search )
})
$( document ).ready(function() {
  $('input').blur(function() {
    $('#refresh').trigger('submit.rails');
  });
});
</script>
<% end %>

还有来自simple_form的HTML：

  <%= simple_form_for user, remote: true, html: {class: 'full-width ', id: "refresh"} do |f| %>
<input type="hidden" name="page" value="admin">

用这样的输入：

<td class='float-label'>
 <%= f.input :first_name
   label: false %>
</td>

“输入”是指输入表单，而#refresh是我分配给simple_form的ID。

所以我认为ajax函数不会刷新并且我不知道如何执行此操作...

一点帮助将不胜感激:)

非常感谢。

Answer 1

您可以使用此$('input').blur(function() { $.ajax({ type:"POST", url:$('#refresh').attr("action"), data:$('#refresh').serialize(), success: function(response){ console.log(response);
} }); });

Answer 2

如果您将simple_form与remote true一起使用，请尝试以下操作：

$('input').blur(function() {
  $('#refresh').trigger('submit.rails');
});

希望能有所帮助。

Answer 3

我找到了答案，但是只能使用javascript，这并不是我真正想要的，但这里是：

 var form = document.getElementById("refresh");

 form.addEventListener("focus", function( event ) {
 event.target.style.background = "pink";
 }, true);

form.addEventListener("focusout", function( event ) {
$('#refresh').trigger('submit.rails');
}, true);

即使它正在工作，似乎每次失去对输入的关注时，整个表单都将重新加载。