Cjuidialog Not Opening After Ajax Update

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


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).



		Yii::app()->baseUrl . '/js/plantmaintenance.js',









			'title'=>'Plant Life Detail',






<h1>Flowering Cycle</h1>


foreach($steps as $step):




			'legend' => $step->name,

			'id' => 'VSPLISTG-FLOWER-FS-'.$step->stindex,

			'divHtmlOptions' => array('id' => 'VSPLISTG-FLOWER-SP-'.$step->stindex,),







			'plantList' => $plantList,

			'plants' => $plants,

			'step' => $step),





<?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.


  1. An easy solution would be to remove the ajax call as just update the entire page. I would like to avoid this.

  2. 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.

  3. 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.

Hi Jay,

I’ve had a very similar issue and it was driving me nuts until I had a look at the data returned via the AJAX call (via the render partial in your controller). I overwrote the ‘success’ function and found the data being returned would contain the script tags I had registered. So you’re right the problem occurs because the script libraries being re-loaded. I ended up using the following (as I also register a few other js files) in my controller that deals with the AJAX call (where you do the render partial).

Yii::app()->clientScript->scriptMap[’*.js’] = false;

You could also put it in your view: ‘_VSPLISTG’ but it would be better placed in the controller.

I hope this helps because it was driving me insane - but all is good now :)


As already explained, the view you display in the dialog, sometimes overrides the dialog’s own libraries.

One way of dealing with it is to ensure that the correct files are loaded - as Dan Van pointed out.

Another way is to insert an iframe between the dialog and the content in the dialog. Iframes are treated by the browser as a separate page with its own libraries. So the scripts of the content "on top of" the iframe, will be separate from the scripts of the dialog "under" the iframe. Check this wiki.

Hi Dude,

      This issue can be solved by making the js files to be false in the Controller,

        Yii::app()-&gt;clientScript-&gt;scriptMap['jquery.js'] = false;

        Yii::app()-&gt;clientScript-&gt;scriptMap['jquery-min.js'] = false;

        Yii::app()-&gt;clientScript-&gt;scriptMap['jquery.maskedinput.min.js'] = false;(if masked textbox is used)

        Yii::app()-&gt;clientScript-&gt;scriptMap['jquery-ui.min.js'] = false;

        (The js files depends upon the widget you are using in cjuidialog page/form)

Then after that you can render the page inside the dialog it will certainly work dude :)