Updating Gridview With Ajax

hi,

i have a view with a dropdown list, a gridview and a google map. i’m using jQuery’s $.ajax function in order to update the map markers after every change of the dropdown list value.

i would like the gridview to update also, but i don’t know what do i have to feed to the grid view.

the usual $.fn.yiiGridView.update(‘order-grid’) does not seem to work, or i’m using it in the wrong way. is there maybe some other, more low-level way for giving the grid updated content? maybe from the JSON response?

here’s the action in the controler:


public function actionMap()

{

	$model      = new Statistics;

	if(!isset($_POST['Statistics']['start_week']))

		$model->start_week = date('W')+3;

	else

		$model->start_week = $_POST['Statistics']['start_week'];

	

	$sql = "some long query";

	

	$dataProvider = new CSqlDataProvider($sql, array(

			'sort'=>array(

				'attributes'=>array(

					'driver', 'country', 'client',

				),

			),

			'pagination'=>array(

				'pageSize' => 1000000,

			),

	));

	

	$this->render('maptest2', array(

		'model'        => $model,

		'dataProvider' => $dataProvider,

	));

}

and here’s the view (i removed most of the google map javascript, as it’s not important here)


<script type="text/javascript">

(function() {

...

	$('#Statistics_start_week').change(function(){

		var kw = $('#Statistics_start_week').val();

		clearMarkers();

		//updateGrid(kw);

		loadMarkers(map, kw);

	});

...

</script>


<h1>Orders</h1>

<?php $this->widget('bootstrap.widgets.TbAlert'); ?>

<div class="form">

    <?php /** @var BootActiveForm $form */

    $form = $this->beginWidget('bootstrap.widgets.TbActiveForm', array(

        'id'=>'order-form',

        'htmlOptions'=>array('class'=>'well'),

        'enableAjaxValidation'=>true,

        'enableClientValidation'=>true,

    )); ?>

    <div class="row-fluid">

        <div class="span3">

            <?php

            echo $form->dropDownListRow(

                $model, 

                'start_week', 

                $model->getWeekOptions(), 

                array(

                    'value'=>$model->start_week, 

                )); 

            ?>

        </div>

    </div>

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

</div>

<div class="row-fluid">

    <p>Map for the week #<span id="kw"></span>.</p>

</div>

<div id="map_canvas" style="width:1000px;height:700px;"></div>


<?php 

$this->widget('bootstrap.widgets.TbGridView', array(

    'type'         => 'striped bordered',

    'dataProvider' => $dataProvider,

    'template'     => "{items}{pager}",

    'id'           => 'order-grid',

    'columns'      => array(

        array(

            'name'    => 'id',

            'header'  => 'Order',

        ),

        array(

            'name'    => 'client',

            'header'  => 'Client',

        ),

        array(

            'name'    => 'zip',

            'header'  => 'ZIP',

        ),

        array(

            'name'    => 'country',

            'header'  => 'Country',

        ),

        array(

            'name'    => 'driver',

            'header'  => 'Driver',

        ),

    ),

)); 

?>

EDIT: the update works when i just send a POST request and refresh the page, but it does not work with ajax.

Hi wuadziu,

As far as I know, the best example of Ajax Updating of CGridView is the gii-generated "admin" page.

By following the example …

In the view script:




<?php

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

$('#order-form').submit(function(){

	$.fn.yiiGridView.update('order-grid', {

		data: $(this).serialize()

	});

	return false;

});


$('#Statistics_start_week').change(function(){

	var kw = $('#Statistics_start_week').val();

	clearMarkers();

	$('#order-form').submit();

	loadMarkers(map, kw);

});

");

?>



Not tested, but something like this should work.

i basically tried this approach in several versions, putting the code in different places but it had not worked.

then i just turned on the chrome developer tools to find out what requests are sent and received and i found my mistake.

in the action map i was checking the $_POST request values in order to make the sql query, what i needed to do was actually to check the $_GET requests. i changed it and now it works like a charm :)