CJuiDialog with dynamic content

Yii 1.1 General Discussion
1

Is it possible to use CJuiDialog when I need to render the content upon dialog open?

Let’s say I have 20 images on a page a I need to display different content in dialog which pops up after click on each image. Can it be done using CJuiDialog? Content should not be pregenerated, because it consists of a lot of queries and logic. It should be generated when dialog pops up.

Is there any other extension I can use? (Lightbox, anything else?)

2

[size="5"]Steps[/size]

What you have to do is use ajax.

This is some general steps you have to follow:

  1. Create an empty CJuiDialog that has autoOpen set to false.

  2. Use ajax ( CHtml::ajaxLink or CHtml::ajaxButton )

  3. The ajax will get the data from an controller action and use either success to:

3.1. Update the content of the CJuiDialog.

3.2. Open the CJuiDialog.

[size="5"]Example code[/size]

[size="4"]AjaLinks[/size]

The ajaxlink should look like.


 

<?php echo CHtml::ajaxLink('Link',

        $this->createUrl('controller/data'),

        array(

            'onclick'=>'$("#juiDialog").dialog("open"); return false;',

            'update'=>'#juiDialog'

        ),

        array('id'=>'showJuiDialog')

);?>

[size="4"]CJuiDialog[/size]

And the cjuidialog wants to be set with id juiDialog like:


<?php 

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

                'id'=>'juiDialog',

                'options'=>array(

                    'title'=>'Show data',

                    'autoOpen'=>true,

                    'modal'=>'true',

                    'width'=>'auto',

                    'height'=>'auto',

                ),

                ));

$this->endWidget();

?>
3

Thank you Tydeas.

I followed your advice, but I couldn’t force ajaxLink to show CJuiDialog dialog. When I changed ajaxLink to Link, dialog opens up empty which was understandable. I was afraid I will have a lot of troubles with that dialog because displayed page consists of a lot JS… but I never thought I could not open a single empty page with such a way… ouch.

I used CJuiDialog before with a simple forms and it worked like expected. With ajaxLink it is not :(

I’m going to do more tries.

4

I’ve tried this several times since I started with Yii 2 years ago and still haven’t resolved what I’m doing wrong.

I think people do not help too much with this kind of questions because its not a yii problem but a jQuery problem.

May be I’ll try another morning in the following weeks.

5

Please post your code.

I’ve noticed that it will not work if I have $("#mydialog").dialog(“open”) in my ajaxLink and CJuiDialog autoOpen set to false, but it will work if I have $("#mydialog").dialog() in my ajaxLink and CJuiDialog autoOpen set to true. I haven’t had sufficient amount of time to figure out why, but perhaps this may help.

6

I’ve modified tydeas_dr’s code a bit and here’s what worked for me


 

<?php echo CHtml::ajaxLink('Link',

        $this->createUrl('controller/data'),

        array(

            'success'=>'function(r){$("#juiDialog").html(r).dialog("open"); return false;}'

        ),

        array('id'=>'showJuiDialog') // not very useful, but hey...

);?>



<?php 

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

                'id'=>'juiDialog',

                'options'=>array(

                    'title'=>'Show data',

                    'autoOpen'=>true,

                    'modal'=>true,

                    'width'=>'auto',

                    'height'=>'auto',

                ),

                ));

$this->endWidget();

?>
7

Thank you. :wub: This worked for me. I’ve tried everything including the articles in the wiki and they didn’t work.

8

Hello,

I also face the same problem for that but after more discussion on this topic i get the solution of this topic.

Thanks to all for the sharing knowledge on this topic.

Thanks & Regards,

Jacob

eSparkInfo

9

Thanx a lot…you are the life saver

10

Thank you very much! :)