Yii 1.1: jblockui

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

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.


Yii 1.1.6 or above...


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

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)


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