Two Gridviews Aren't Playing Nicely Together

In my parent view I have this grid:

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

            'id' => 'mainGrid',

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

            'filter' => $model,

            //'ajaxUpdate' => 'updateData',

            'selectionChanged' => "updateChild", // new code

            'columns' => array(

                'firstName', 'lastName'



In my child view, I have another grid that appears if the child data has appropriate categories to display about it. This is done in an AJAX manner with a renderPartial() in the controller method:



                        'id' => "familyGrid",

                        'type' => 'striped bordered',

                        'dataProvider' => $relatedData['families'],

                        'columns' => array(


                                'name' => 'Family Name',

                                'value' => '$data->familyName'



                                'name' => 'First Line Address',

                                'value' => '$data->Address1'



                                'name' => 'City',

                                'value' => '$data->City'



                                'name' => 'State',

                                'value' => '$data->State'



                                'name' => 'ZIP',

                                'value' => '$data->ZIP'




When a person is clicked on the GridView in the parent view, their data appears in the child view, and if they belong to any families, the second GridView will render this. If this is the case, when I try and click on another person on the GridView in the parent view, I get the following error:

Cannot read property ‘tableClass’ of undefined.

It’s as if jQuery has forgotten that the table is there, or something.

There does not seem to be any documentation regarding this error, and I have no idea how to remedy it. Are there any solutions to this?


Can you show us the updateChild function?

function updateChild(id, options)



            /*  Extract the Primary Key from the CGridView's clicked row */


           // alert($.fn.yiiGridView.getSelection(id));

            var pK = parseInt($.fn.yiiGridView.getSelection(id));


            if (pK > -1) {

                //grab data from url 

                var jqxhr = $.ajax( {

                    type: 'POST',

                    url: 'person/updateChild',

                    data: { pk: pK },

                    cache: false,


                .done(function(data) {


                    //alert( 'success' );


                .fail(function() {

                    //alert( 'error' );





        catch (ex){

            alert(ex.message); /*** Send this to the server for logging when in

                       production ***/



Maybe this will help

I found the solution to my problem, multiple versions of jquery were being loaded and causing conflicts. However, I am still having issues with javascript in these views. Below is an example:

One of the things I want to do is make use of the notify.js stuff. When I first click onto the page, with no child view yet loaded, the notify.js works fine

$.notify("Example!", "success");

. When I click on a record in my parent GridView, and the child view appears, trying the notify.js functionality again renders this result in the console: Typeerror: undefined is not a function. I do not know what is going on when the child view is populated that the js that had been loaded before is suddenly forgotten.