Yii 1.1: jblockui

Simulate synchronous ajax by blocking - not locking - the UI.
12 followers

This widget encapsulates the jQuery BlockUI Plugin (Version 2.38 (29-MAR-2011)).

This plugin lets you block user interaction with the page or with a specific element on the page. Also great at displaying modal dialogs.

Requirements

Yii 1.1.6 or above...

Usage

  • extract the widget file under .../protected/extensions
  • put in a view a code blocks like the following...
<h1>Example 1: Page Blocking</h1>
<p>
This page demonstrates several ways to block the page.
Each button below activates blockUI and then makes a remote call to the server.
</p>
<?php
$widget=$this->widget('ext.blockui.JuiBlockUI');
$widget->addScriptLines(array("$(document).ajaxStop($.unblockUI);"));
$widget->addScriptLines(array(
    "function test() {",
    JuiBlockUI::ajax(array(
        'url'=>array('/blockUi/wait'),
        'cache'=>false
    )),
    "}",    
));
$widget->registerScript(CClientScript::POS_HEAD);
?>
 
<p>
    <input id="pageDemo1" class="demo" value="Default Message" type="submit">
    <?php $widget->addEventHandler('#pageDemo1','click',array(
        JuiBlockUI::blockUI(),
        "test();",
    ));?>
    <input id="pageDemo2" class="demo" value="Custom Message" type="submit">
    <?php $widget->addEventHandler('#pageDemo2','click',array(
        JuiBlockUI::blockUI(array(
            'message'=> '<h1><img src="'.$widget->getImage().'" /> Just a moment...</h1>'
        )),
        "test();",
    ));?>
    <input id="pageDemo3" class="demo" value="Custom Style" type="submit">
    <?php $widget->addEventHandler('#pageDemo3','click',array(
        JuiBlockUI::blockUI(array(
            'css'=>array(
                'backgroundColor'=>'#f00'
                ,'color'=> '#fff')
        )),
        "test();",
    ));?>
    <input id="pageDemo4" class="demo" value="DOM Element as Message" type="submit">
    <?php $widget->addEventHandler('#pageDemo4','click',array(
        JuiBlockUI::blockUI(array(
            'message'=> "js:$('#domMessage')"
        )),
        "test();",
    ));
    $widget->registerScript();
    ?>
</p>
 
<div id="domMessage" style="display: none;">
    <h1>We are processing your request.  Please be patient.</h1>
</div>

Change log

Version 1.0

  • initial release

Version 1.2

  • added helper methods to generate javascript code
  • added minified javascript file

Version 1.3

  • updated javascript: Version 2.39 (23-MAY-2011)

Resources

Alternative solution

Total 1 comment

#3345 report it
nickcv at 2011/04/05 06:30am
could use a little improvement

you should improve the widget and let the coder set the message there.

forcing the user to create the dom element containing the message it's not a good practice.

keep up the good work!

Leave a comment

Please to leave your comment.

Create extension