JQuery and BlockUI

剛剛看到 jaceju 大人所分享的web連結 這篇中Javascript那段,有一句話突然讓我豁然開朗:

上次 ericsk 提到的時間差問題,其實是 JavaScript call stack 的問題,可以利用 setTimeout(…., 0) 來避掉。

我突然想到,現在在做的網站中,有一頁是使用者點選一個checkbox後,會觸發ajax request。 不過我希望在還沒全部載回內容前可以把頁面先block住。所以採用了jquery.blockui 這個plugin。 不過在ie 7.0會發生block釋放後,目的checkbox沒被點選的情形….(我一直摸不清頭緒…)。看到這段話後,我就豁然開朗了,把程式碼從原本的:

$().ajaxStart($.blockUI).ajaxStop($.unblockUI);

改成:

$().ajaxStart(function(){
setTimeout($.blockUI,0);
});
$().ajaxStop(function(){
setTimeout($.unblockUI,0);
});

這樣就不會發生這種尷尬的問題了,但是…事情還沒完。改成這樣之後 Fx出現詭異的問題。 原本的訊息應該是寫著

please wait

不過現在卻會出現數字…o_O !!! 如下圖:

blockui.png

還有另一種數字:68 。 是該去買樂透了嗎?

廣告

16 thoughts on “JQuery and BlockUI

  1. 改這樣呢?

    $().ajaxStart(function(){
    setTimeout(function () { $.blockUI },0);
    });
    $().ajaxStop(function(){
    setTimeout(function () { $.unblockUI },0);
    });

  2. 報告 jaceju:

    這樣寫會沒反應,根據我不才我的揣測是否應是:
    $().ajaxStart(function(){
    setTimeout($.blockUI ,0);
    });
    $().ajaxStop(function(){
    setTimeout( $.unblockUI,0);
    });

    這樣的意思, 不過依舊不行阿,還出現更多數字呢 :P。
    太有趣了。萬分感謝:D

  3. 有趣有趣,我這兩天有空的話也會試試看的~ 🙂

    有個實驗的方式可以參考看看:用 Firebug 配合 blockUI 的 Source Code 來找出是在哪個部份出現的。

  4. 報告 jaceju :

    也不是id 跟value 這幾個checkbox的id 跟value 都是文字

    我猜也不是acsii 因為不是每次都一樣 XD

    下班回家再去debug了 😛 感謝建議。

    真是叨煩了阿…

  5. 不會啦,討論技術是我的興趣 🙂

    我剛剛試出來了:

    test.html

    
    
    
    
    jQuery TEST
    
    
    
    $(function () {
        $().ajaxStart(
            function () {
                setTimeout($.blockUI, 0);
            }
        ).ajaxStop($.unblockUI);
        $('input.testBox').click(function () {
            $.ajax({
                url: 'test.php',
                type: 'post',
                dataType: 'json'
            });
        });
    });
    
    
    
    
    
    
    
    
    
    
    

    test.php

     true));
    

    基本上我試的情況是 unblockUI 就不用 setTimeout 了,參考看看吧~~

  6. … 囧… 不能顯示 HTML code …

    再試一次…

    test.html

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jQuery TEST</title>
    <script type="text/javascript" src="jquery/1_2_1.js"></script>
    <script type="text/javascript" src="jquery/blockUI.js"></script>
    <script type="text/javascript">
    $(function () {
    $().ajaxStart(
    function () {
    setTimeout($.blockUI, 0);
    }
    ).ajaxStop($.unblockUI);
    $('input.testBox').click(function () {
    $.ajax({
    url: 'test.php',
    type: 'post',
    dataType: 'json'
    });
    });
    });
    </script>
    </head>
    <body>
    <form action="test.php" name="frmTest" method="post">
    <input type="checkbox" name="test[]" id="test1" value="1" class="testBox" />
    <input type="checkbox" name="test[]" id="test2" value="2" class="testBox" />
    <input type="checkbox" name="test[]" id="test3" value="3" class="testBox" />
    </form>
    </body>
    </html>

    test.php

    <?php
    sleep(3);
    echo json_encode(array('success' => true));

    拍謝~~我好像一次貼太多篇了… orz

  7. 另外我看了一下 blockUI 的用法,如果有需要建立自己的訊息 (例如「請稍後…」) ,原本官方網站的範例:

    $().ajaxStart($.blockUI).ajaxStop($.unblockUI);

    就要改成:

    $().ajaxStart(function () { $.blockUI(‘請稍後…’) }).ajaxStop($.unblockUI);

    因為 ajaxStart 第一個參數只接受 function literal ,而 setTimeout 也是一樣。如果用了 $.blockUI(xxxx) 就表示要執行 blockUI 這個動作了,所以要再用一層 function 包起來。

    CrazyLion ,這裡也感謝你介紹這個好東西呀~~我以前一直沒注意它說~~這個是很常用的 plugin ~~

  8. 報告 jaceju:

    不敢 您的到來讓我這邊蓬壁生輝阿 XD

    不過後來我不知道有沒有搞錯您的意思 還是我寫的太差@@

    我遇到的問題是 預設的訊息是please wait
    如果改成 呼叫 setTimeout 再呼叫 $blockUI的話 …

    預設的訊息就變會成數字 像上面的圖一樣 我的意思是這樣..@@
    (不呼叫setTimeout,直接呼叫的話 正常喔)

    因為我還沒時間debug所以我目前的解法就是… 用張圖 😛

    不過說不定是我的問題就是了XD

  9. 嗯嗯,應該不是你使用 blockUI 的問題啦,我看了一下官方的用法也是如此;我試的方法也跟你的一模一樣,只是去掉 unblockUI 的 setTimeout 而已。

    不過你是因為加了 setTimeout 才會出現數字,而我上面的例子在 Firefox 上測試卻不會;那麼我想你可以用我的例子先試試看,看看是不是版本的問題 (我用的是 jQuery 1.2.1 ) 。

    如果確定是版本問題的話,就有解了。如果不是,那麼我想只好再配合 Firebug 及 jQuery 的 Source code ,一步一步去找找看問題所在了。

  10. 感謝 jaceju 阿( 我有挪抬喔 XD) 😛

    應該不是版本的問題,因為我有換兩個版本的jquery測都一樣。
    看來只好使用firebug 來看看了。

    非常感謝您的指教阿 !!!

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s