« 不知道是誰的問題
elgg »

10 十一月

JQuery and BlockUI

Posted by CrazyLion in web-Development.

剛剛看到 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 。 是該去買樂透了嗎？

14 回應 to this post.

  1. Posted by jaceju on 十一月 10, 2007 at 8:30 午後

    改這樣呢？

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

  2. Posted by CrazyLion on 十一月 10, 2007 at 10:54 午後

    報告 jaceju:

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

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

  3. Posted by jaceju on 十一月 12, 2007 at 3:34 午後

    有趣有趣，我這兩天有空的話也會試試看的~ :)

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

  4. Posted by jaceju on 十一月 12, 2007 at 3:37 午後

    突然想到，這個數字會不會是 checkbox 的 id ？

  5. Posted by jaceju on 十一月 12, 2007 at 3:41 午後

    想錯了，可能是 value 而不是 id 。

    …不過這真是激起我的戰意呀~~我一定要來試試看！

  6. Posted by CrazyLion on 十一月 12, 2007 at 3:45 午後

    報告 jaceju :

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

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

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

    真是叨煩了阿…

  7. Posted by jaceju on 十一月 12, 2007 at 4:00 午後

    不會啦，討論技術是我的興趣 :)

    我剛剛試出來了：

    test.html

    [code]

    jQuery TEST

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

    [/code]

    test.php
    [code]
    true));
    [/code]

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

  8. Posted by jaceju on 十一月 12, 2007 at 4:02 午後

    … 囧… 不能顯示 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

  9. Posted by jaceju on 十一月 12, 2007 at 4:10 午後

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

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

    就要改成：

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

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

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

  10. Posted by CrazyLion on 十一月 12, 2007 at 4:19 午後

    報告 jaceju:

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

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

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

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

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

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

  11. Posted by jaceju on 十一月 12, 2007 at 4:48 午後

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

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

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

  12. Posted by CrazyLion on 十一月 12, 2007 at 4:57 午後

    感謝 jaceju 阿( 我有挪抬喔 XD) :P

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

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

  13. Posted by jaceju on 十一月 12, 2007 at 5:28 午後

    呵呵，不用那麼客氣啦，平平都是技術人員，大家能一起討論心得我覺得是很棒的事情 :)

  14. Posted by JQuery and BlockUI II « 轉折，然後向上 on 十一月 12, 2007 at 9:14 午後

    [...] and BlockUI II 繼上篇 JQuery and BlockUI之後，受到 jaceju [...]

Respond to this post