API Documentation for Yii 1.1
0 follower
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:
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.
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
| Property | Type | Description | Defined 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
| Method | Description | Defined 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
| Method | Description | Defined 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.
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.
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.
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.
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.
The solution in the use CGridView of the dialog box
When used in a dialog box "CGridView", then for each subsequent method call "selectionChanged" number of AJAX queries increases. To avoid this, you must unbind events "CGridView" when closing the dialog box.
$this->beginWidget('zii.widgets.jui.CJuiDialog', array( 'id' => 'dialog', 'options' => array( 'title' => 'Добавить ответ', 'autoOpen' => false, 'resizable' => false, 'modal' => 'true', 'close' => 'js:function(){ $(document).off("click", "#id-gridview .items > tbody > ), tr"); }' ) ));Signup or Login in order to comment.