Pylons 処理中のインジケーターを表示する



Pylonsに限ったことではないのですが、Webアプリケーションで
重たい処理を実行するとき、
「しばらくお待ちください」
と表示しておきたいことがあります。

Ajaxで受信中のインジケータを表示する

ここを参考に、実装してみたので、ソースのメモ。

使用するJavascript、imageの配置はこんな感じ。

■画像ファイル


■Javascriptファイル



コントローラーとテンプレートのソースです。

■コントローラー

class WaitTestController(BaseController):

    def index(self):
        return render('/heavy.mako')

    def heavy(self):
        print request.params['data']
        import time
        time.sleep(5)
        return '処理が終了しました'



■テンプレートファイル

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
  <head>
    <meta http-equiv=Content-Type content="text/html; charset=UTF-8">
    <meta http-equiv="content-script-type" content="text/javascript">
    <script type="text/javascript" 
        src="../js/jsgt_indicator.js" charset="utf-8"></script>
    <script type="text/javascript" 
        src="../js/jslb_ajax.js" charset="utf-8"></script>
    <script language = "JavaScript">
    <!--  
    //Ajax送信と同時にインジケータ開始
    function send(){
        indi.indi_start();
        document.getElementById("output1").innerHTML="";
        sendRequest(on_loaded1,{data:123},'GET','heavy',true,true);
    }

    //コールバック関数 ( 受信時に実行されます )インジケータ停止
    function on_loaded1(oj) {
        indi.indi_stop();
        //レスポンスを取得
        var res  =  decodeURIComponent(oj.responseText);
        document.getElementById("output1").innerHTML=res;
    }
    //インジケータインスタンス
    var indi = new jsgt_Indicator('../img/pleasewait.gif') ;
    //インジケータを追加するDIVを指定
    window.onload = function(){
        indi.indi_append("indidiv");
        send();
    }
    //-->
    </script>
    <title>処理待ちテスト</title>
  </head>
  <body>
    <!-- インジケータ用DIV -->
    <div id="indidiv"></div>
    <!-- ここへレスポンスを出力します -->
    <div id="output1"></div>
  </body>
</html>



実行してみるとこんな感じ。



いろいろ使えそうです。




もどる