Versions
Look up a class, method, property or event

CJuiDialog

Package zii.widgets.jui
Inheritance class CJuiDialog » CJuiWidget » CWidget » CBaseController » CComponent
Since 1.1
Source Code framework/zii/widgets/jui/CJuiDialog.php
CJuiDialog displays a dialog widget.

CJuiDialog encapsulates the JUI Dialog plugin.

To use this widget, you may insert the following code in a view:
$this->beginWidget('zii.widgets.jui.CJuiDialog',array(
    'id'=>'mydialog',
    // additional javascript options for the dialog plugin
    'options'=>array(
        'title'=>'Dialog box 1',
        'autoOpen'=>false,
    ),
));

    echo 'dialog content here';

$this->endWidget('zii.widgets.jui.CJuiDialog');

// the link that may open the dialog
echo CHtml::link('open dialog', '#', array(
   'onclick'=>'$("#mydialog").dialog("open"); return false;',
));


By configuring the options property, you may specify the options that need to be passed to the JUI dialog plugin. Please refer to the JUI Dialog API documentation for possible options (name-value pairs) and JUI Dialog page for general description and demo.

Public Properties

Hide inherited properties

PropertyTypeDescriptionDefined By
actionPrefix string the prefix to the IDs of the actions. CWidget
controller CController Returns the controller that this widget belongs to. CWidget
cssFile mixed the theme CSS file name. CJuiWidget
htmlOptions array the HTML attributes that should be rendered in the HTML tag representing the JUI widget. CJuiWidget
id string Returns the ID of the widget or generates a new one if requested. CWidget
options array the initial JavaScript options that should be passed to the JUI plugin. CJuiWidget
owner CBaseController Returns the owner/creator of this widget. CWidget
scriptFile mixed the main JUI JavaScript file. CJuiWidget
scriptUrl string the root URL that contains all JUI JavaScript files. CJuiWidget
skin mixed the name of the skin to be used by this widget. CWidget
tagName string the name of the container element that contains all panels. CJuiDialog
theme string the JUI theme name. CJuiWidget
themeUrl string the root URL that contains all JUI theme folders. CJuiWidget
viewPath string Returns the directory containing the view files for this widget. CWidget

Public Methods

Hide inherited methods

MethodDescriptionDefined By
__call() Calls the named method which is not a class method. CComponent
__construct() Constructor. CWidget
__get() Returns a property value, an event handler list or a behavior based on its name. CComponent
__isset() Checks if a property value is null. CComponent
__set() Sets value of a component property. CComponent
__unset() Sets a component property to be null. CComponent
actions() Returns a list of actions that are used by this widget. CWidget
asa() Returns the named behavior object. CComponent
attachBehavior() Attaches a behavior to this component. CComponent
attachBehaviors() Attaches a list of behaviors to the component. CComponent
attachEventHandler() Attaches an event handler to an event. CComponent
beginCache() Begins fragment caching. CBaseController
beginClip() Begins recording a clip. CBaseController
beginContent() Begins the rendering of content that is to be decorated by the specified view. CBaseController
beginWidget() Creates a widget and executes it. CBaseController
canGetProperty() Determines whether a property can be read. CComponent
canSetProperty() Determines whether a property can be set. CComponent
createWidget() Creates a widget and initializes it. CBaseController
detachBehavior() Detaches a behavior from the component. CComponent
detachBehaviors() Detaches all behaviors from the component. CComponent
detachEventHandler() Detaches an existing event handler. CComponent
disableBehavior() Disables an attached behavior. CComponent
disableBehaviors() Disables all behaviors attached to this component. CComponent
enableBehavior() Enables an attached behavior. CComponent
enableBehaviors() Enables all behaviors attached to this component. CComponent
endCache() Ends fragment caching. CBaseController
endClip() Ends recording a clip. CBaseController
endContent() Ends the rendering of content. CBaseController
endWidget() Ends the execution of the named widget. CBaseController
evaluateExpression() Evaluates a PHP expression or callback under the context of this component. CComponent
getController() Returns the controller that this widget belongs to. CWidget
getEventHandlers() Returns the list of attached event handlers for an event. CComponent
getId() Returns the ID of the widget or generates a new one if requested. CWidget
getOwner() Returns the owner/creator of this widget. CWidget
getViewFile() Looks for the view script file according to the view name. CWidget
getViewPath() Returns the directory containing the view files for this widget. CWidget
hasEvent() Determines whether an event is defined. CComponent
hasEventHandler() Checks whether the named event has attached handlers. CComponent
hasProperty() Determines whether a property is defined. CComponent
init() Renders the open tag of the dialog. CJuiDialog
raiseEvent() Raises an event. CComponent
render() Renders a view. CWidget
renderFile() Renders a view file. CBaseController
renderInternal() Renders a view file. CBaseController
run() Renders the close tag of the dialog. CJuiDialog
setId() Sets the ID of the widget. CWidget
widget() Creates a widget and executes it. CBaseController

Protected Methods

Hide inherited methods

MethodDescriptionDefined By
registerCoreScripts() Registers the core script files. CJuiWidget
registerScriptFile() Registers a JavaScript file under scriptUrl. CJuiWidget
resolvePackagePath() Determine the JUI package installation path. CJuiWidget

Property Details

tagName property
public string $tagName;

the name of the container element that contains all panels. Defaults to 'div'.

Method Details

init() method
public void init()
Source Code: framework/zii/widgets/jui/CJuiDialog.php#62 (show)
public function init()
{
    
parent::init();

    
$id=$this->getId();
    if(isset(
$this->htmlOptions['id']))
        
$id=$this->htmlOptions['id'];
    else
        
$this->htmlOptions['id']=$id;

    
$options=CJavaScript::encode($this->options);
    
Yii::app()->getClientScript()->registerScript(__CLASS__.'#'.$id,"jQuery('#{$id}').dialog($options);");

    echo 
CHtml::openTag($this->tagName,$this->htmlOptions)."\n";
}

Renders the open tag of the dialog. This method also registers the necessary javascript code.

run() method
public void run()
Source Code: framework/zii/widgets/jui/CJuiDialog.php#81 (show)
public function run()
{
    echo 
CHtml::closeTag($this->tagName);
}

Renders the close tag of the dialog.

Total 4 comments

#11754 report it
Phil Loaiza at 2013/02/01 02:02pm
Button link to route
$target = 'window.location='."'".$this->createUrl( $route )."'";
 
$this->beginWidget('zii.widgets.jui.CJuiDialog', array(
'id'=>'publishDialog',
// additional javascript options for the dialog plugin
'options'=>array(
    'title'=>'Dialog Title',
    'autoOpen'=>false,
    'buttons' => array(
        array('text'=>'Route','click'=> 'js:function(){'.$target.'}'),
        array('text'=>'Cancel','click'=> 'js:function(){$(this).dialog("close");}'),
    ),
),
));

This shows how to create a button inside the pop up dialog that, when clicked, will open up a new page based on the $route specified.

So to bring up site/contact you would set $target to:

$target = 'window.location='."'".$this->createUrl('site/contact')."'";

You don't have to put your target into a variable, you can bake it right into:

array('text'=>'Route','click'=> 'js:function(){'.$target.'}'),

But it makes it a lot easier to read and edit when it's broken out into a separate variable.

#5923 report it
Trejder at 2011/11/25 03:42am
Another important tip on using buttons in CJuiDialog

jQuery seems to have some sort of internal problem, when you're injecting code for handling click on buttons directly into buttons definition array.

If this happens, click on your button will not be processed properly and instead browser report an error saying: "H.apply is not a function".

Moving your code to a separate JS function, named for example processOKButton, and putting only call to that function into dialog's buttons definition array was a simple solve in my case.

Also, take a look here: jQuery's forum topic on this.

#5919 report it
Trejder at 2011/11/24 05:09pm
Close Button

Following my previous comment. Add this code:

'buttons' => array('Close'=>'js:function(){$(this).dialog("close"))}'),

to options array of your CJuiDialog to have a dialog with "Close" button.

#2444 report it
Trejder at 2011/01/03 05:23am
Setting buttons property

If you want to setup buttons or any other property that requires jQuery object, use following notation:

'buttons' => array
(
     'Ok'=>'js:function(){alert("ok")}',
     'Cancel'=>'js:function(){alert("cancel")}',
),

i.e. prefix your definition with js: prefix.

Thanks to jerry2801 and schmunk for the idea. See this forum post for more details on this problem.

Leave a comment

Please to leave your comment.