Update Gridview With Ajax When A Modal Form Close

Hello,

I am trying tu update my gridForm when my modal form close.

I follow this tutorial :

http://www.yiiframework.com/wiki/145/cjuidialog-for-create-new-model/

here my code :





<?php

/* @var $this AdDroitController */

/* @var $model AdDroit */


$this->breadcrumbs=array(

	'Ad Droits'=>array('index'),

	'Manage',

);


$this->menu=array(

	array('label'=>Yii::t('app','Liste des droits'), 'url'=>array('index')),

	array('label'=>Yii::t('app','Créer un droit'), 'url'=>array('create')),


);


Yii::app()->clientScript->registerScript('search', "

$('.search-button').click(function(){

	$('.search-form').toggle();

	return false;

});

//$('.add-button').click(function(){

//	$('.add-form').toggle();

//	return false;

//});

//$('.cancel-button').click(function(){

//	$('.add-form').toggle();

//	return false;

//});

$('.search-form form').submit(function(){

	$.fn.yiiGridView.update('ad-droit-grid', {

		data: $(this).serialize()

	});

	return false;

});

");

?>

<?php // Yii::app()->language='en'; ?>

<h1><?php echo Yii::t('app','Les droits') ?></h1>





<?php echo CHtml::button(Yii::t('app','Rechercher'),array('submit' => $url,'class'=>'search-button')); ?>





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

	'label'=> Yii::t('app','Ajouter'),

    'size' => 'small',

	'type'=>'primary',

	'htmlOptions'=>array(

		//'data-toggle'=>'modal',

        'url'=>'#',

		'data-target'=>'#dialogPermission',

        'onclick'=>"{addPermission(); $('#dialogPermission').dialog('open');}" //'$("#myModal").dialog("open"); return false;',

	),

)); ?>


<div class="search-form" style="display:none">

<?php $this->renderPartial('_search',array(

	'model'=>$model,

)); ?>

</div>


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

    'id'=>'dialogPermission',

    'options'=>array(

        'title'=>'Create permission',

        'autoOpen'=>false,

        'modal'=>true,

        'width'=>600,

        'height'=>250,

        'close'=> 'js: function(event, ui){ window.location = "'.Yii::app()->createUrl($this->route).'";}',

   ),

   )); ?>

<div class="divForForm"></div> 


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




<script type="text/javascript">

// here is the magic

function addPermission()

{

    <?php echo CHtml::ajax(array(

            'url'=>array('adDroit/create'),

            'data'=> "js:$(this).serialize()",

            'type'=>'post',

            'dataType'=>'json',

            'success'=>"function(data)

            {

                if (data.status == 'failure')

                {

                    $('#dialogPermission div.divForForm').html(data.div);

                          // Here is the trick: on submit-> once again this function!

                    $('#dialogPermission div.divForForm form').submit(addPermission);

                }

                else

                {

                    $('#dialogPermission div.divForForm').html(data.div);

                   [color="#000080"] $.fn.yiiGridView.update('ad-droit-grid');[/color]

                    //setTimeout(\"$('#dialogPermission').dialog('close') \",3000);

                  

                }

 

            } ",

            ))?>;

    return false; 

 

}

 

</script>







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

	'id'=>'ad-droit-grid',

	'dataProvider'=>$model->search(),

//	'filter'=>$model,

	'columns'=>array(

        array(

            'name'=>'droit_id',

            'class'=>'QGridColumn',

            'header'=>'nomnm',

        ),

        array(

            'name'=> 'nom',

            'class'=>'QGridColumn',

            'header'=>'nomnm',

        ),

        array(

            'name'=>'description',

            'class'=>'QGridColumn',

            'header'=>'des',

        ),

		array(

			'class'=>'QButtonColumn',


        ),

     ),

)); ?>



I have this error :

In the function addPermission() I add :




$.fn.yiiGridView.update('ad-droit-grid');



any ideas ?

Nath

If you use modal window (iframe), you must use this command


parent.$.fn.yiiGridView.update('ad-droit-grid');

And you must call this command after submiting form, not before

I usualy use Yii::app()->user->setFlash(…);

For example

In controller




if($model->save()){

Yii::app()->user->setFlash('success', 'Data saved successfully!');

$this->redirect('/path/to/this/form/');

}



In view with form




if (Yii::app()->user->hasFlash('success')){

       Yii::app()->clientScript->registerScript('success', "

               parent.$.fn.yiiGridView.update('category');

       ");

}



Thank you for your answer.

I tried your exemple but it doesn’t work.

Don’t you think that we can make the refresh here :




function addPermission()

{

    <?php echo CHtml::ajax(array(

            'url'=>array('adDroit/create'),

            'data'=> "js:$(this).serialize()",

            'type'=>'post',

            'dataType'=>'json',

            'success'=>"function(data)

            {

                if (data.status == 'failure')

                {

                    $('#dialogPermission div.divForForm').html(data.div);

                          // Here is the trick: on submit-> once again this function!

                    $('#dialogPermission div.divForForm form').submit(addPermission);

                }

                else

                {

                    $('#dialogPermission div.divForForm').html(data.div);

                   parent.$.fn.yiiGridView.update('ad-droit-grid');      <<<<<<<<<< ------- Update Grid !!!!!!!!!

                    //setTimeout(\"$('#dialogPermission').dialog('close') \",3000);

                  

                }

 

            } ",

            ))?>;

    return false; 

 

}

the timeOUt doesn’t work, too !

I find the problem :

in the controller of create :




...




 if (Yii::app()->request->isAjaxRequest)

        {

            echo CJSON::encode(array(

                'status'=>'failure', 

                'div'=>$this->renderPartial('_form', array('model'=>$model), true))); <<<<<<<<<<< this is correct

               'div'=>$this->renderPartial('_form', array('model'=>$model), true,true))); <<<<<<<<<<< this is WRONG

            exit;               

        }

        else

            $this->render('create',array('model'=>$model,));

...