轨道上的红宝石 - 显示加载图标/gif，直到从 API 返回结果

Question

我正在调用一个 api，加载结果大约需要 15-20 秒，所以我想显示一个加载 gif，例如直到它们加载。

我

有一个简单的表格，可以发出请求，然后将我重定向到相关操作

<%= form_tag results_path, :method => "get" do %>
<%= text_field_tag 'search', nil, :placeholder => "Enter Email Address here...." %>
<%= submit_tag 'Search' %>

在呈现结果之前，如何将图像添加到results_path？

我可以在表单本身中执行此操作，还是一段Jquery/Javascript

。

谢谢

Answer 1

根据Rails 3：远程链接和表单，你可以这样做

• 将:remote => true添加到您的form_tag
• 将以下内容添加到您的 JS 中

$('SEARCH-BUTTON').bind('ajax:loading', function(){
  $('LOADING-GIF').show();
});
$('SEARCH-BUTTON').bind('ajax:complete', function(){
  $('LOADING-GIF').hide();
  // add what you like here
});

我还没有测试过它，但我认为它可以解决问题。

Answer 2

这将禁用带有微调器的按钮，直到收到响应。

<%= button_tag "Search", class: "btn btn-default", 'data-disable-with' => "<i class='fa fa-spinner fa-spin'></i>".html_safe %>

Answer 3

您可以通过

异步调用 API 来执行此操作。 我不知道如何在Ruby中做到这一点，但这是一般的想法。 api将在后台调用，在此之前将显示加载图标。完全获取 API 后，您可以删除加载图标。