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();

        ｄocument.getElementById("output1").innerHTML="";

        sendRequest(on_loaded1,{data:123},'GET','heavy',true,true);

    }



    //コールバック関数 ( 受信時に実行されます )インジケータ停止

    function on_loaded1(oj) {

        indi.indi_stop();

        //レスポンスを取得

        var res  =  decodeURIComponent(oj.responseText);

        ｄocument.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>

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

いろいろ使えそうです。

もどる