Cgridview Update Multiple Divs Afterdelete

Yii 1.1 General Discussion
1

Hi guys

I’ve been searching around alot for this issue and have found many similar problems, but not quite the same.

Basically my app can have up to 2 gridviews on the page. The first is always there and is a list of all courses selected by the student.

There is a CButtonColumn where the student can delete courses or add new courses.

The second gridview is the general list of courses and is stored in _courseList.php.

If the student has courses, the course list is not shown. They have to click the add course button to display the course list in order to add more courses. If the student has not chosen any courses, the course list appears by default. The problem is when I delete a course, which is done using an ajax request, if the student has no more courses selected, the course list does not appear. This is fixed by refreshing the page, but I’d like to do it by an ajax request. Here is the relevant code in my view:




// GridView Code

 array

        (

            'class'=>'CButtonColumn',

            // Update div with message on delete

            'afterDelete' => 'function(link,success,data){ if(success) $("#msg").html(data); }',

            'template'=>'{delete} {second}',

            'header'=>'Edit',

            'buttons'=>array

            (

                'delete' => array(

                    'label' => 'Delete',

                    'imageUrl' => Yii::app()->request->baseUrl.'/images/icons/delete.png',

                    'options'=>array(

                        'title'=>'Delete this course',

                    ),

                ),

                'second' => array

                ...

On the same page, i have this div.

I would like this div to be updated after deletion of each course so that $model->HasCourses() is evaluated and the course list is show if false.




<div id='course_list' >

    <?php

    // If the student has no course chsoices, display list

    if (!$model->hasCourses(Yii::app()->user->id)) {

        $cp = new CoursePeriod('search');

        $cp->unsetAttributes();

        if (isset($_GET['CoursePeriod'])) {

            $cp->attributes = $_GET['CoursePeriod'];

     }

        echo $this->renderPartial('_courseList', array('cp'=>$cp));

    }

    ?>

</div>

So basically if the student has no courses, the list is displayed.

But this only happens when the page is refreshed. If the last course is deleted through the GridView delete button, the gridview containing the student’s courses is updated to show zero courses, a message appears in “div id=‘msg’” confirming the deletion using afterDelete, but the second gridview containing the full list of courses is not rendered in “div id=‘course_list’”.

Obviously i’m missing a step to get the div to refresh somehow, without refreshing the whole page.

does anyone have any ideas?

2

Hi iredan,

You can use CGridView::ajaxUpdate property to include the 2nd grid in the ajax updating process.

http://www.yiiframework.com/doc/api/1.1/CGridView#ajaxUpdate-detail




// GridView Code

 array

        (

            'class'=>'CButtonColumn',

            // Update div with message on delete

            'afterDelete' => 'function(link,success,data){ if(success) $("#msg").html(data); }',

            'ajaxUpdate'=>'course_list', // this is it

            'template'=>'{delete} {second}',

            'header'=>'Edit',
3

HI Softark,

Thanks for getting back to me.

This works if the ajaxUpdate statement is placed above the CButtonColumn as per the api.

Otherwise I get an error saying that ajaxUpdate does not belong to CButtonColumn.




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

    'id' => 'course-choice-grid',

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

    'type'=>'striped bordered condensed',

    'enableSorting' => false,

    'ajaxUpdate'=>'course_list', // update course_list div

The only problem is that the filtering in the course list gridview doesn’t work in this scenario (this is the second gridview in course_list div that is reloaded after delete). I have to refresh the page and then the filtering works again in the course list grid.

Am I missing something silly here? Both grids have different id’s.

Thanks again for your help!

4

Oops, yes, you are right.

I noticed that you are not creating the 2nd grid when initially the student has a course. It means that the page has no javaScript for the 2nd grid then. So even after the 2nd grid is loaded via ajax, it lacks the filtering functionality that depends on the javaScript.

I would always create the 2nd grid, and make it visible/invisible according to the condition.

5

Hi sorry for taking so long to reply.

I’ve just tested it again and you are of course correct regarding the missing javascript. I’ve fixed it for now by reducing the amount of ajax which means that the page refreshes. But there is alot going on and the second gridview is populated with data depending on various different situations and variables, so perhaps I was trying something too complicated. I’ll come back to it another time, but for now, it works! :slight_smile:

Thanks again.