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 links and Forms，您可以这样做

将: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来做到这一点。我不知道如何在红宝石中做到这一点，但这是一般的想法。 api将在后台调用，直到那时你将显示加载图标。完全获取api后，您可以删除加载图标。

显示加载图标/ gif，直到从api返回结果

3 个答案: