Yii - Design question - Keeping dialoges separate from the main view file and accessing them - yii

Question

I have a case where on my view file there are 6 links and clicking on them opens CJuiDialog boxes . I am keeping all the 6 dialog boxes code in the same view file along with links and that is causing the file to be big and loading them all together once .The ideal scenario is the dialog boxes should get loaded only when the use clicks on the links .
So is there any way we can keep only the links code in the main view file and keeping all the dialogue boxes in separate files and loading them only when the user clicks on the links
I mean
index.php ( view containing only links)
_dialog1 ( containing code for first dialog )
_dialog2 ( containing code for second dialog )
_dialog3 ( containing code for third dialog )
_dialog4 ( containing code for fourth dialog )
_dialog5 ( containing code for fifth dialog )
_dialog6 ( containing code for sixth dialog )
Sample Code
//First Dialog code
$this->beginWidget('zii.widgets.jui.CJuiDialog', array(
'id'=>'mydialog1',
'options'=>array(
'title'=>'Dialog box 1',
'autoOpen'=>false,
'modal'=>true,
),
));
echo 'First dialog content here';
$this->endWidget('zii.widgets.jui.CJuiDialog');
echo CHtml::link('open dialog', '#', array(
'onclick'=>'$("#mydialog1").dialog("open"); return false;',
));
//2nd dialog code
$this->beginWidget('zii.widgets.jui.CJuiDialog', array(
'id'=>'mydialog2',
'options'=>array(
'title'=>'Dialog box 1',
'autoOpen'=>false,
'modal'=>true,
),
));
echo 'dialog2 content here';
$this->endWidget('zii.widgets.jui.CJuiDialog');
echo CHtml::link('open dialog', '#', array(
'onclick'=>'$("#mydialog2").dialog("open"); return false;',
));
Solution I came with
//In controller
public function actionOpenDialog1()
{
$data = array();
$this->renderPartial('_dialogContent1', $data, false, true);
}
public function actionOpenDialog2()
{
$data = array();
$this->renderPartial('_dialogContent2', $data, false, true);
}
//In index.view
<div id="data">
</div>
<?php
echo CHtml::ajaxButton ("Open first dialog", CController::createUrl('dialogTesting/openDialog1'),array('update' => '#data'));
echo CHtml::ajaxButton ("Open second dialog", CController::createUrl('dialogTesting/openDialog2'),array('update' => '#data'));
?>
//_dialogContent1.php
<?php
$this->beginWidget('zii.widgets.jui.CJuiDialog', array(
'id'=>'mydialog1',
'options'=>array(
'title'=>'Dialog box 1',
'autoOpen'=>true,
'modal'=>true,
),
));
echo 'first dialog content here';
$this->endWidget('zii.widgets.jui.CJuiDialog');
?>
//_dialogContent2.php
<?php
$this->beginWidget('zii.widgets.jui.CJuiDialog', array(
'id'=>'mydialog1',
'options'=>array(
'title'=>'Dialog box 1',
'autoOpen'=>true,
'modal'=>true,
),
));
echo 'first dialog content here';
$this->endWidget('zii.widgets.jui.CJuiDialog');
?>
Thanks a lot for your help
Regards
Kiran

Answer 1

Naming files
The convention in Yii is to name the view files:
index.php: a full view
_dialog1.php: a partial view (included from another view)
Sub views
Then you can include partial views with CController::renderPartial():
$this->beginWidget(...);
$this->renderPartial('_dialog1', array('var1' => 23, 'var2' => "var"));
$this->endWidget(...);
Factorizing code
This should make your source node much lighter. But I suggest you go farther and avoid duplicating all those widget calls. To do this, you should define a structure for your dialog parameters and loop over it. Something like:
$dialogs = array(
'mydialog1' => array(
'file' => '_dialog1',
'options' => array('title' => "My title 1",),
),
'mydialog2' => array(
'file' => '_dialog12,
'options' => array('title' => "My title 2",),
),
);
$defaultOptions = array(
'autoOpen' => false,
'modal' => true,
);
foreach ($dialogs as $id => $dialog) {
$this->beginWidget(
'zii.widgets.jui.CJuiDialog',
array(
'id' => $id,
'options' => CMap::mergeArray($defaultOptions, $dialog['options']),
)
);
// ... include partial view ...
This factorization will make your code more compact, but it will above simplify the future changes. Using data structures to avoid code duplication is a well-known practice.
AJAX
Lastly, if you really want the partial views to be loaded dynamically, that means you have to use AJAX. Be careful, because your page may be less reactive from a user point of view. If all your forms amount to a few Kb of HTML, then there's no nedd for AJAX. But if you go this way, then you'll need to:
Add an CJuiDialog containing just <div id="dialog-ajax"></div>.
Create another action that will apply renderPartial() on the dialog views.
Replace the content of the previous foreach loop with code that writes JS like function dialog1() {jQuery("#dialog-ajax").load(...);}. You'll need to hack if you want to change dynamically the widget title.
Bind some events (clicks) to these JS functions.
Another way would be to make your aJAX action render a full CJuiDialog, it might be simpler and avoid JS hacks. Anyway, I'm not sure you really need AJAX.

Answer 2

My answer
//In controller
public function actionOpenDialog1()
{
$data = array();
$this->renderPartial('_dialogContent1', $data, false, true);
}
public function actionOpenDialog2()
{
$data = array();
$this->renderPartial('_dialogContent2', $data, false, true);
}
//In index.view
'#data'));
echo CHtml::ajaxButton ("Open second dialog", CController::createUrl('dialogTesting/openDialog2'),array('update' => '#data'));
?>
//_dialogContent1.php
$this->beginWidget('zii.widgets.jui.CJuiDialog', array(
'id'=>'mydialog1',
'options'=>array(
'title'=>'Dialog box 1',
'autoOpen'=>true,
'modal'=>true,
),
));
echo 'first dialog content here';
$this->endWidget('zii.widgets.jui.CJuiDialog');
?>
//_dialogContent2.php
$this->beginWidget('zii.widgets.jui.CJuiDialog', array(
'id'=>'mydialog1',
'options'=>array(
'title'=>'Dialog box 1',
'autoOpen'=>true,
'modal'=>true,
),
));
echo 'first dialog content here';
$this->endWidget('zii.widgets.jui.CJuiDialog');
?>

Answer 3

You can simply include one empty CJuiDialog in your page, and when it needs to be displayed load the contents with jQuery AJAX (load is the simplest, and probably enough) that returns a render of the appropriate view before opening the dialog.