[Solved] Need Help With Tblistview And Cjuidialog

Yii 1.1 General Discussion
1

Hi all:

This may be more of a JavaScript issue rather than Yii, but I’m baffled and would appreciate some help. I have a TbListView where I want to show an onclick dialog containing an attribute that is part of the row but not shown in the list. I reckon this approach is simpler than using Ajax calls because TbListView has already retrieved all the data so there’s no need to go back to the server.

View show.php:




<?php $this->widget('bootstrap.widgets.TbListView',array(

	'dataProvider'=>$dataProvider,

	'itemView'=>'_show',

	'summaryText' => '',

	'template' => '{items}',

	'enableHistory' => false,

	'enablePagination' => false,

	'separator' => '',

	'cssFile' => false,

)); ?>


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

	'id' => 'plan-dialog',

	'options' => array(

		'autoOpen' => false,

		'width' => 450,

		),

	));

?>

<div class="plandesc"></div>

<?php $this->endWidget(); ?>

itemView _show.php:




<div class="view">

<div class="table table-condensed table-hover">

    <table>

        <tbody>

            <tr>

                <th>

                    <b><?php echo CHtml::encode($data->getAttributeLabel('plan_code')); ?></b>

                </th>

                <td>

                    <?php echo CHtml::link(CHtml::encode($data->plan_code),'#',array(

                        'onclick'=>'{

                            $("#plan-dialog").

                            dialog({title: "' . $data->plan_code . ' Plan Description"}). // <- THIS WORKS!

                            html("' . $data->description . '"). // <- THIS DOES NOT WORK!

                            dialog("open");

                            return false;

                            }'

                         ));

                    ?>

                </td>

            </tr>

            <tr>

                <th>

                    <b><?php echo CHtml::encode($data->getAttributeLabel('title')); ?></b>

                </th>

                <td>

                    <?php echo CHtml::encode($data->title); ?>

                </td>

            </tr>

            <tr>

                <th>

                    <b><?php echo CHtml::encode($data->getAttributeLabel('price')); ?></b>

                </th>

                <td>

                    <?php echo CHtml::encode($data->price); ?>

                </td>

            </tr>

        </tbody>

</table>

</div>

</div>

The $data->plan_code is a simple string while the $data->description attribute contains HTML composed with the redactor editor.

The dialog doesn’t display at all when I click on the link but if I replace the $data->description attribute with simple text it is displayed in the dialog body fine. I’m puzzled because it does work for the dialog title attribute (which comes from $data->plan_code). Perhaps the problem lies with the dialog’s .html method and how it reacts to actual HTML code because if I CHtml::encode it then it displays, albeit with garbage characters.

Any ideas? Thanks in advance.

2

Well, after a week of exhaustive research on JQuery’s .html and other methods, I couldn’t solve it with JavaScript tricks :-[ . It appears that the HTML markup in the description attribute (which contained CSS elements as well) just breaks JQuery’s parsing of the .html content. So, I ended up using Ajax…

itemView _show.php




<div class="view">

<div class="table table-condensed table-hover">

    <table>

        <tbody>

            <tr>

                <th>

                    <b><?php echo CHtml::encode($data->getAttributeLabel('plan_code')); ?></b>

                </th>

                <td>

                    <?php echo CHtml::ajaxLink(CHtml::encode($data->plan_code),

                    $this->createUrl('vSubscriptionplan/getdesc'),

                    array(

                        'type' => 'POST',

                        'data' => array('id'=>$data->id),

                        'success' => 'js:function(data){

                                $("#plan-dialog").

				dialog({title: "' . CHtml::encode($data->plan_code) . ' Plan Description"}).

				dialog("open");

				document.getElementById("plan-dialog").innerHTML=data;

                                }')

                         );

                    ?>

                </td>

            </tr>

            <tr>

                <th>

                    <b><?php echo CHtml::encode($data->getAttributeLabel('title')); ?></b>

                </th>

                <td>

                    <?php echo CHtml::encode($data->title); ?>

                </td>

            </tr>

            <tr>

                <th>

                    <b><?php echo CHtml::encode($data->getAttributeLabel('price')); ?></b>

                </th>

                <td>

                    <?php echo CHtml::encode($data->price); ?>

                </td>

            </tr>

        </tbody>

</table>

</div>

</div>

where action Getdesc in the controller is defined as:




public function actionGetdesc()

{

    $model = $this->loadModel($_POST['id']);

    echo $model->description;

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

}

It works now, but I would have preferred not going back to the server to get data that CListView had already loaded. If anyone comes up with a better way I’m all ears, but I hope this exercise helps someone else.

Thanks!