如何在不刷新页面的情况下重新加载ajax答案

【问题标题】：How to reload ajax without refreshing the page如何在不刷新页面的情况下重新加载ajax
【发布时间】：2017-10-06 08:15:21
【问题描述】：

当焦点不在时，我正在尝试更新 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>

'input' 指的是输入表单，#refresh 是我分配给 simple_form 的 ID。

所以我认为ajax函数不会刷新，我不知道该怎么做......

一点帮助将不胜感激:)

非常感谢。

【问题讨论】：

标签： jquery ruby-on-rails ajax

【解决方案1】：

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

【讨论】：

感谢您的快速回答。不幸的是，它仍然不起作用。但是，我的控制台中有所有日志，所以我猜你已经很接近了。

【解决方案2】：

如果你使用 simple_form 和 remote true，试试这个：

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

希望对您有所帮助。

【讨论】：

感谢您的回答！我确实使用了远程 true，但仍然无法正常工作。
@RaphaëlFOSSE 你检查了日志，有没有发送请求？如果还没有，我们可以通过 console.log("inside the blur 回调函数！") 进行调试，以确保动作被触发。 :)
是的，动作被触发，我有“回复用户”。我可以在不刷新页面的情况下多次执行此操作。

【解决方案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);

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

【讨论】：