如何顯示動畫微調，而後臺任務使用AJAX

是處理嵌套軌道模型

我具體的例子是非常複雜的，所以我將使用Railscasts由Ryan所示的例子來討論這個問題：如何顯示動畫微調，而後臺任務使用AJAX

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

背景

我有一個表格，讓我們說「調查」，其中包含任意數量的「問題」。

Senario

給我在「編輯調查」頁面。

我想爲每個「Question」字段添加一個按鈕，該按鈕調用remote_function，然後隊列隊列的delayed_job對「Question」執行一些處理。

要給用戶提供反饋，我想禁用該按鈕，並顯示一個動畫微調框，它將一直保留，直到delayed_job處理完「問題」。

提示 - 我可以在「問題」模型中添加方法來指示delayed_job的狀態。

因此，考慮到最佳實踐，實現此目標的最佳方法是什麼？

來源

2010-02-02 ktec

使用jQuery，你應該能夠使用回調來打開和關閉跳動（是的...這是「官方」的名稱）。

或者，如果是更復雜的我曾經使用過這樣的：

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

來源

2010-02-02 12:58:56 Quotidian

首先，您需要一個動畫圖形微調。谷歌和有大量的網站會爲你生成它們。

參考的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-02 14:00:46

顯示的微調是不是真的，雖然在這裏挑戰，問題是遠程函數調用只需設置delayed_job，它將由delayed_job進程執行。我需要的是某種觀察者功能，它反覆輪詢服務器以確定作業是否已完成，並且有一個，我需要隱藏與該作業相關的特定微調框。 – ktec 2010-02-02 18:18:46

簡單。

創建一個隱藏的元素來展示我們的圖像
使用CSS來格式化佈局
使用JavaScript來打開效果通/斷

把HTML在你的頁面模板

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

一些簡單的CSS to fo RMAT塊（這創造了半透明的背景下，阻止用戶交互）

/*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';

如果您想了解更多詳情，或需要一個半透明像素使用，看我的文章全文

How to fade window and show translucent progress bar

來源

2010-02-02 14:05:01 Eddie

做投票，並與類似的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-20 17:52:09 Leito

如何顯示動畫微調，而後臺任務使用AJAX

回答

相關問題