jblockui Simulate synchronous ajax by blocking - not locking - the UI.

  1. Requirements
  2. Usage
  3. Change log
  4. Resources
  5. Alternative solution

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

8 0
12 followers
1 160 downloads
Yii Version: 1.1
License: BSD-2-Clause
Category: User Interface
Developed by: volkmar
Created on: Mar 30, 2011
Last updated: 6 years ago

Downloads

show all

Related Extensions