renderPartial, processOutput and Firefox problem

Hey,

I’ll try abstract from as much detail as possible to help explain my problem. Within an index view I have an image with the following click event attached to it:


 

jQuery('#product-grid a.viewButton').live('click', function(){

        var url = $(this).attr('href');

        $.post(url, function(res){

            $('#dialog').html(res);

        });



That javascript will make an ajax call to the following action:




    /**

     * Bring up a CJuiDialog containing a Product model AR instance to view. 

     * @param int $id PK of the Product

     * @throws CHttpException user attempted to view via querystring.

     */

    public function actionViewProduct($id) {

        if(Yii::app()->request->isPostRequest && Yii::app()->request->isAjaxRequest) {

            $this->renderPartial('/product/_view', array('productModel' => $this->loadProductModel($id)), false, true);

        }

        else {

            throw new CHttpException(400, 'Invalid request. Please view the product through the product management tab or directly within the store.');

      



Which renders the following view:




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

    'id' => 'viewDialog',

    'options' => array(

        'title' => $productModel->name,

        //'autoOpen' => false,

        'modal' => true,

        'width' => 500,

        'height' => 500,

    ),

));


$this->renderPartial('//product/view', array('model' => $productModel));


$this->endWidget();



The problem is that when viewing the site in firefox the content of the CJuiDialog is momentarily rendered on the actual page instead of inside the dialog (like I had $processOutput set to false). When I say momentarily I mean about 25ms. Once the dialog appears the content is stripped from the page and placed inside the dialog. Does anyone know how I might solve this? It works fine with IE and Chrome. If my problem is unclear in anyway I can try upload my site somewhere so you can see what I mean. Thanks for any advice :)

Well I worked out a solution. After stepping away from the PC it quickly occurred to me that calling a controller action that renders a view containing a widget that also renders a view served no purpose (I’m still new to the framework and that solution just made sense at the time). I now have the CJuiDialog widget within the index view and just have a <div> element for the content. This is initially empty and the dialog’s autoOpen property is set to false. When the click event is called it will get the output from the controller action and place it into the dialog’s content <div>. A much cleaner solution and as the CJuiDialog already exists on the page I do not get the strange transition I was experiencing.

Index stuff:




    <?php 

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

        'id' => 'viewDialog',

            'options' => array(

                'title' => 'View product',

                'autoOpen' => false,

                'modal' => true,

                'width' => 500,

                'height' => 500,

            ),

        ));

    ?>

    

        <div id="viewDialogContent"></div>


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


<script type="text/javascript" >

    jQuery('#product-grid a.viewButton').live('click', function(){

        var url = $(this).attr('href');

        $.post(url, function(res){

            $('#viewDialogContent').html(res);

            $('#viewDialog').dialog('open');

        });

        

        return false;

    });

</script>



controller action:


    

    public function actionViewProduct($id) {

        if(Yii::app()->request->isPostRequest && Yii::app()->request->isAjaxRequest) {

            $this->renderPartial('//product/view', array('model' => $this->loadProductModel($id)), false, true);

        }

        else {

            throw new CHttpException(400, 'Invalid request. Please view the product through the product management tab or directly within the store.');

        }

    }