Update Gridview Contents Using Ajax

Yii 1.1 General Discussion
1

I am looking to update a GridView via an Ajax call. I already have a dropDownList calling the controller action just not sure where to go from there. How do I manage to update the contents of the GridView.

View: (dropDownList)




echo CHtml::dropDownList('choice', '', $choices, array(

    'id' => 'choice', 

    'empty' => 'Choose Option',

    'ajax' => array(

        'type' => 'post',

        'url' => Yii::app()->createUrl('myController/ajaxCall'),

        'success' => 'function(data) {

            $.fn.yiiGridView.update("choice-list", {data: $(this).serialize()});

        }',

    )

)); ?>

View: (GridView)




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

    'id' => 'choice-list',

    'dataProvider'=>new CArrayDataProvider(array()), // Empty to start out

    'columns' => array(

        array(

            'header' => 'Pick',

            'type' => 'raw',

            'value' => array($this, 'itemSelect'), // Build a radioButton with value of id

        ),

        array(

            'header' => 'ID',

            'name' => 'id',

        ),

        array(

            'header' => 'Name',

            'name' => 'name',

        ),

    ),

));

A bit more explaination… Id is in a separate table as name so I have to do a bit of joining since this is all filtered by a dropdown and its previous selections. Not sure if that makes a difference or not. No pagination is required as this list will be very minimal like 2, 3 results at best. Thanks in advance for the help.

2

you can call the change event on document ready

for e.g


<?php $gridId = 'choice-list'; ?>



<script type="text/javascript">

function updateGridAuto(val)

{

	var inputSelector = "#<?php echo $gridId?> .filters input, #<?php echo $gridId?> .filters select";

	$.fn.yiiGridView.update('<?php echo $gridId?>', {

        data:  $(inputSelector).serialize()

    });

}

$(document).ready(function(){

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

		var val = $("#Wines_username").val($('#Wines_username_auto').val());

		updateGridAuto(val);

	});

});

 </script>

I hope it;s may be some help.

3

can you try this




$(document).ready(function(){

$('#choice').live('change',function(){

 	updateGrid();

});

function updateGrid()

{

  $.fn.yiiGridView.update('choice-list', {

	data: $(choice-list).serialize()

  });

}

});