Post processing of new row via ajax in CGridView


I’m adding new rows to my CGridView via an ajax form. I’d like to change the text on one of my cells to “Running…” after the new row is inserted to indicate that something is still running in the background (until the user needs to click a link to stop the process). I tried the success ajax event per a suggestion from another forum post but it seems like the row is inserted after the event is complete.

I also tried the afterAjaxUpdate event in CGridView. This seems to fire on a new row being inserted but I don’t know how to access the id of the cell (or for the record) for the newly inserted row. The id parameter returns the id of the CGridView and the data parameter returns the data for the whole page.

Here’s the code for the success event upon successful submission of form:

		<!--  CODE FOR AJAX FORM -->


        function success(data) {

                // refresh your grid


                $('.fly').html('Running...');//Tried as a test but the row is not yet inserted

                //.link-column '+data

                alert(data);//row still not displayed


        function failure(data) {





This is my CGridView


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



	'afterAjaxUpdate'=>'function(id, data){

	alert(data);//returns the data for the whole page

















		'linkHtmlOptions' => array('class'=>'fly')








Thanks for your help.

Hi. Why didn’t you reply in the same thread?

Hi bennouna,

I thought it would be confusing as in that thread I was asking for documentation. In this thread I’m asking for an approach. Also, figured would be easier for people to search against a clear topic title.

Thanks for your replies. I tried the ajax event as you suggested but it seems like the row is added after the success function. Is that possible or do I have it wrong.

I got it to work well using afterAjaxUpdate in CGridView. Not sure why the success event wasn’t working. I tried:


The alert popped up but for some reason the table wouldn’t refresh, the grid would just keep loading.


That syntax isn’t right, should be: (assuming you had the same error in your actual code)


You forgot the opening { on the options object.

I was digging around in the javascript for gridview, turns out that is deprecated in 1.1.9 anyway and the new syntax is:

$("#idofgridview").("update", {optionsobject});

Be nice if that was documented somewhere!