era
era

Reputation: 535

CJUIDialog doesnt work with CListView pager Controller

I have CListView and inside im redering a view that has a button, when clicked it opens a CJUIDialog.

But when i go through to the next page with the page controller. The CJUIDialog content loads to the page without clicking the button.

Any idea why it's coming like that?

It'll be great if anyone can help me out. Thanks!

Upvotes: 0

Views: 512

Answers (1)

sucotronic
sucotronic

Reputation: 1504

Ok, Yii generate the ids for lot of controls in an automatic way, so to avoid collision with events I recommend you to take out the interaction handling out of the item view in the following way:

In the page where the CListView is generated:

$this->widget('zii.widgets.CListView', array(
    'dataProvider'=>$dataProvider,
    'itemView'=>'_post',   // refers to the partial view named '_post'
    'sortableAttributes'=>array(
        'title',
        'create_time'=>'Post Time',
    ),
));
$this->beginWidget('zii.widgets.jui.CJuiDialog', array(
    'id'=>'dialog',
    'options'=>array(
        'title'=>'Dialog',
        'autoOpen'=>false,
    ),
));
$this->endWidget('zii.widgets.jui.CJuiDialog');

In the item view page:

echo CHtml::htmlButton('Button',array('onclick' => '$("#dialog").dialog("open");'));

In case you need to do something with the data row (like using the id property of that data), you can create a custom javascript function that will receive the data when the button is clicked.

echo CHtml::htmlButton('Button',array('onclick' => 'myFunction('.$data->id.')'));

And the previous example then would be:

<?php
$this->widget('zii.widgets.CListView', array(
    'dataProvider'=>$dataProvider,
    'itemView'=>'_post',   // refers to the partial view named '_post'
    'sortableAttributes'=>array(
        'title',
        'create_time'=>'Post Time',
    ),
));
$this->beginWidget('zii.widgets.jui.CJuiDialog', array(
    'id'=>'dialog',
    'options'=>array(
        'title'=>'Dialog',
        'autoOpen'=>false,
    ),
));
$this->endWidget('zii.widgets.jui.CJuiDialog');
?>
<script type="text/javascript">
function myFunction(id) {
    // you can put whatever you need inside the dialog 
    $("#dialog").html(id);
    // open the dialog
    $("#dialog").dialog("open");
}
</script>

Upvotes: 1

Related Questions