1

私の具体的な例は非常に複雑なので、Railscasts の Ryan が示した例を使用してこれについて説明します。

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

バックグラウンド

任意の数の「質問」を含む「調査」としましょう。

セナリオ

私は「調査の編集」ページにいます。

各「質問」フィールドに、remote_function を呼び出すボタンを追加したいと思います。これは、「質問」で何らかの処理を実行するために、delayed_job をキューに入れます。

ユーザーにフィードバックを提供するために、ボタンを無効にして、アニメーション化されたスピナーを表示したいと思います。これは、delayed_job が「質問」を処理するまで残ります。

ヒント - 「質問」モデルにメソッドを追加して、delayed_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 に答える