I have a CJuiDialog that is used to render detail for a plant with the plants being contained within JCollapsibleFieldset with each plant being represented by a row in a table. Each plant row has three buttons, one button fires off some javascript to show the plant detail in the CJuiDialog another button to fire some js to display a calendar so the date the plant state was changed can be set if it is not today and a third button that makes an ajax call to the server to update the state of the plant. all of these buttons exist for each plant shown in the table.
Once the new list of plants have been rendered via the ajax call the buttons listed above are also freshly rendered. The buttons to update the plant state and the button to display the CJuiDatePicker both work but the button to display the CJuiDialog does not work. The error message that I get is
cannot call methods on dialog prior to initialization; attempted to call method 'open'
The CJuiDatePicker works because the data returned by ajax call to the server to update the plant list returns the
[CDATA[*\jQuery('#rowDate-162').datepicker({'dateFormat':'mm/dd/yy'});
to initialize each datePicker.
This is the code in the view to render the CJuiDialog as well as the plant listing which in rendered with the call to renderPartial(_VSPLISTG).
<?php
Yii::app()->clientScript->registerScriptFile(
Yii::app()->baseUrl . '/js/plantmaintenance.js',
CClientScript::POS_HEAD
);
Yii::app()->clientScript->registerCoreScript('jquery');
$this->widget(
'zii.widgets.jui.CJuiDialog',
array(
'id'=>'pd-dialog',
'options'=>array(
'title'=>'Plant Life Detail',
'autoOpen'=>false,
'modal'=>true,
'width'=>'25%',
'height'=>'auto')));
?>
<h1>Flowering Cycle</h1>
<?php
foreach($steps as $step):
$this->beginWidget(
'JCollapsibleFieldset',
array(
'legend' => $step->name,
'id' => 'VSPLISTG-FLOWER-FS-'.$step->stindex,
'divHtmlOptions' => array('id' => 'VSPLISTG-FLOWER-SP-'.$step->stindex,),
'collapsed'=>false,));
?>
<?php
$this->renderPartial(
'_VSPLISTG',
array(
'plantList' => $plantList,
'plants' => $plants,
'step' => $step),
false,
false
);
?>
<?php $this->endWidget(); ?><!-- collabsible fieldset -->
<?php endforeach; ?>
As can be gleaned here the CJuiDialog is inserted with this view and then the data for the plant listing is rendered with the _VSPLISTG partialRender. The _VSPLISTG is also the view that is used to return the plant listing with the ajax call to update the plant list when a plant has had its state changed.
After the plant list is updated via the ajax call I need to have theCJuiDialog available.
IDEAS:
-
An easy solution would be to remove the ajax call as just update the entire page. I would like to avoid this.
-
Put the CJuiDialog in the _VSPLISTG so that it is returned with the updated list of plants with the ajax call. I have not done this yet because some view have two distinct list of plants and I was looking to avoid putting two CJuiDialog’s and have to figure out the id for each.
-
The preferred solution would be to somehow (re)initialize the CJuiDialog after the new list of plants is returned via the ajax call to the server.
On another note the ajax call to update the list of plants also returns a CJuiDatePicker that is associated with each plant row. The renderPartial(’_VSPLISTG’ array(), true, true) also includes another reference to jQuery.js and jQuery-ui.min.js and if the view has two separate listing of plants then each is returned twice. Both of these were loaded with the initial page load and do not need to be reloaded. I believe this can be done with
Yii::app()->clientScript->scriptMap['jquery.js'] = false;
but I am unsure of its proper use or where it should properly be place with my script files.
