1

我的具体示例非常复杂，因此我将使用 Railscasts 的 Ryan 展示的示例来讨论这个问题：

http://railscasts.com/episodes/197-nested-model-form-part-2

背景

我有一个表格，比如说“调查”，其中包含任意数量的“问题”。

塞纳里奥

给我在“编辑调查”页面上。

我想在每个调用remote_function的“问题”字段中添加一个按钮，然后排队等待延迟作业以对“问题”执行一些处理。

为了向用户提供反馈，我想禁用该按钮，并显示一个动画微调器，直到 delay_job 处理了“问题”。

提示 - 我可以向“问题”模型添加方法来指示延迟作业的状态。

那么，考虑到最佳实践，实现这一目标的最佳方法是什么？

4

4 回答 4

3

进行轮询并使用类似于以下的 json 响应：

{"finished": [1,3,3]}

然后添加轮询 JavaScript

  var interval = setInterval(function() {
    $.get("test.json", function(data) {
      for(i in data.finished) {
        //Hide spinner with id = data.finished[i]
      }
    })
  }, 5000) //Time in milliseconds
于 2011-05-20T17:52:09.337 回答
1

首先，您需要一个动画微调器图形。谷歌，有很多网站会为你生成它们。

在您的布局（或视图）中引用 gif：

    <%= image_tag 'spinner.gif', :id => 'spinner', :style => "display:none;position:absolute;top:300px;left:500px;" %>

（这假定页面上的固定位置）

然后将以下内容添加到您的 remote_function 调用中：

:before => "Element.show('spinner')",
:after => "Element.hide('spinner')"
于 2010-02-02T14:00:46.707 回答
1

简单的。

  1. 创建一个隐藏元素来显示我们的图像
  2. 使用 CSS 格式化布局
  3. 使用Javascript打开/关闭效果

将 html 放入页面模板中

//hidden div that has spinner image
<div id="LoadingDiv" style="display:none;">
        <img src="ajax-loader.gif" alt="" /></div>

一些简单的 CSS 来格式化块（这创建了阻止用户交互的半透明背景）

/*the basics, and works for FF*/
#LoadingDiv{
    margin:0px 0px 0px 0px;
    position:fixed;
    height: 100%;
    z-index:9999;
    padding-top:200px;
    padding-left:50px;
    width:100%;
    clear:none;
    background:url(/img/transbg.png);
    /*background-color:#666666;
    border:1px solid #000000;*/
    }
/*IE will need an 'adjustment'*/
* html #LoadingDiv{
     position: absolute;
     height: expression(document.body.scrollHeight &gt; document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
    }

然后根据需要打开和关闭

var ldiv = document.getElementById('LoadingDiv');
ldiv.style.display='block';
/*Do your ajax calls, sorting or laoding, etc.*/
ldiv.style.display = 'none';

如果您想了解更多细节，或者需要使用半透明像素，请参阅我的完整文章

如何淡化窗口并显示半透明进度条

于 2010-02-02T14:05:01.537 回答
0

使用 jQuery，您应该能够使用回调打开和关闭 throbber（是的......这是“官方”名称）。

或者，如果它更复杂，我以前用过这个：

http://plugins.jquery.com/project/throbber

于 2010-02-02T12:58:56.363 回答