[ Solved ] CGridView in JUiDialog (ajax problem)

Yii 1.1 General Discussion
1

Hi!

I have a ajax link which loads a JUiDialog with a CGridView.

you can see it here:

http://ashley.sixserve.com/~ratmboot/?mid=7

(click on the link ‘Most Common Bands’)

my problem is:

  • when i first click the link, the Dialog appears and sorting/paging in CGridView works :D

  • when i close the dialog and click again the link, the dialog appears but sorting/paging in CgridView does NOT LONGER works :(

anyone can help with this?

here is my used code:

(view with ajax link)




...

<?php

     echo CHtml::ajaxLink('Most Common Bands', $this->createUrl('GetBandsDialog&mid=7'), array('update' => '#dialog_bands'));

?> 

<div id="dialog_bands" style="visibility: hidden;"></div>

...

(action in controller)




...

public function actionGetBandsDialog() {

    ...

    $commonBandsDataProvider = $this->getCommonBandsDataProvider();


    $this->renderPartial('_bands', array('bandsData' => $commonBandsDataProvider,), false, true);


    Yii::app()->end();

}

...

view (_bands.php) which gets loaded with ajax:




<?php

$this->beginWidget('zii.widgets.jui.CJuiDialog', array(

    'id' => 'bandsdialog',

    'options' => array(

        'autoOpen' => true,

        'title' => 'Most Common Bands',

        'modal' => false,

        'width' => 'auto',

        ))

);

$this->widget('zii.widgets.grid.CGridView', array(

    'dataProvider' => $bandsData,

    'columns' => array(

        'name',

        'concerts',

        'records',

        array(

            'name' => 'length',

            'type' => 'raw',

            'value' => 'CHtml::encode($data["length"]." min (".number_format(($data["length"]/60),2)." hour)")',

        ),

    ),

    'id'=>'bands'

));

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

?>
2

I have a similar problem but I don’t know how to solve it.

I Tested your aplication. Your problem is that when you click the ajax link, a JuiDialog is created. When you click again, another JuiDialog is created with the same objects inside. When you click in pagination buttons, the objects that are modified are from the first JuiDialog and you are seeing the second.

Do you use firebug? With firebug you can destroy the first JuiDialog and then pagination buttons start working.

Somebody knows how destroy a JuiDialog before creating another?

3

OHH!!!

yeah you are right. without the JuiDialog it works.

so there msut be a way to:

  1. destroy the JuiDialog before creating another

  2. do not create a new and show the already create old one

anyone know how to do this?

4

You could use the close event of the dialog and remove it from the DOM.

Something like,




'close' => 'js:function() {$(this).remove();}'

Not sure if this is the actual dialog element, you would need to check.

5

thank you very much!!! this is the solution.

this did not work for me…

anyway, i use the close event now to remove the Dialog with the id like this:

view (_bands.php) which gets loaded with ajax:




<?php

$this->beginWidget('zii.widgets.jui.CJuiDialog', array(

    'id' => 'bandsdialog',

    'options' => array(

        'autoOpen' => true,

        'title' => 'Most Common Bands',

        'modal' => false,

        'width' => 'auto',

        'close'=>'js:function(){ $("#bandsdialog").remove(); }',

        ))

);

$this->widget('zii.widgets.grid.CGridView', array(

    'dataProvider' => $bandsData,

    'columns' => array(

        'name',

        'concerts',

        'records',

        array(

            'name' => 'length',

            'type' => 'raw',

            'value' => 'CHtml::encode($data["length"]." min (".number_format(($data["length"]/60),2)." hour)")',

        ),

    ),

    'id'=>'bands'

));

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

?>
6

here we go, to make use of this


$(this).dialog('destroy').remove();

Will destroy the ui dialog then remove the original div.