Hi,
In Yii Framework when I place a CGridView inside a tab, I get a javascript error: "Uncaught TypeError: undefined is not a function index.php?r=department/view&id=2:121
(anonymous function) index.php?r=department/view&id=2:121
fire jquery.js:974
self.fireWith jquery.js:1084
jQuery.extend.ready jquery.js:406
DOMContentLoaded"
Everything is working fine, but I’m worried about that error. What could it be?
Here’s the code from the main page and also the render page used in the tab.
$tabs = $this->widget('bootstrap.widgets.TbTabs', array(
'id' => 'tabs',
'type' => 'tabs',
'tabs' => array(
array('label' => 'Users', 'content' => $this->renderPartial('_admin', array('model' => $model), true, true)),
),
));
Render page:
$this->widget('bootstrap.widgets.TbGridView', array(
'id'=>'user-grid',
'type'=>'striped bordered condensed',
'dataProvider'=>$model->search(),
'filter'=>$model,
'columns'=>array(
'id',
'name',
'job',
array(
'class'=>'bootstrap.widgets.TbButtonColumn',
),
),
));
HTML Output
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="en">
<link rel="stylesheet" type="text/css" href="/themes/bootstrap/css/styles.css">
<link rel="stylesheet" type="text/css" href="/themes/bootstrap/css/form.css">
<link rel="stylesheet" type="text/css" href="/themes/bootstrap/css/jquery-ui-override.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="/assets/e3ecaab1/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="/assets/e3ecaab1/css/bootstrap-responsive.css">
<link rel="stylesheet" type="text/css" href="/assets/e3ecaab1/css/yii.css">
<script type="text/javascript" src="/assets/76299ef8/jquery.js"></script><style type="text/css"></style>
<script type="text/javascript" src="/assets/76299ef8/jquery.ba-bbq.js"></script>
<script type="text/javascript" src="/assets/e3ecaab1/js/bootstrap.js"></script>
<title>iManage - View Department</title>
</head>
<body>
<div class="navbar navbar-fixed-top"><div class="navbar-inner"><div class="container"><a href="/index.php" class="brand">iManage</a><ul id="yw4" class="nav"><li><a href="/index.php?r=site/index"><i class="icon-home"></i> Home</a></li><li><a href="/index.php?r=user/admin"><i class="icon-eye-open"></i> Users</a></li><li class="active"><a href="/index.php?r=department/admin"><i class="icon-tags"></i> Departments</a></li><li><a href="/index.php?r=site/logout">Logout (admin)</a></li></ul></div></div></div>
<div class="container" id="page">
<ul class="breadcrumbs breadcrumb"><li><a href="/index.php">Home</a><span class="divider">/</span></li><li><a href="/index.php?r=department/index">Departments</a><span class="divider">/</span></li><li class="active">903</li></ul><!-- breadcrumbs -->
<div class="row">
<div class="span3">
<div id="sidebar">
<ul class="side-menu nav nav-list" id="yw3"><li class="nav-header">Operations</li><li><a href="/index.php?r=department/admin"><i class="icon-th"></i> Manage Departments</a></li><li><a href="/index.php?r=department/index"><i class="icon-th-list"></i> List Departments</a></li><li><a href="/index.php?r=department/create"><i class="icon-plus-sign"></i> Create Department</a></li><li class="active"><a><i class="icon-eye-open"></i> View Department</a></li><li><a href="/index.php?r=department/update&id=903"><i class="icon-pencil"></i> Update Department</a></li></ul></div>
</div>
<div class="span9">
<div id="content">
<h1>View Users</h1>
<div id="tabs"><ul id="yw2" class="nav nav-tabs"><li class="active"><a data-toggle="tab" href="#tabs_tab_1">Users</a></li></ul><div class="tab-content"><div id="tabs_tab_1" class="tab-pane active"><script type="text/javascript" src="/assets/76299ef8/jquery.js"></script>
<script type="text/javascript" src="/assets/76299ef8/jquery.ba-bbq.js"></script>
<div id="department-grid" class="grid-view">
<div class="summary">Displaying 1-1 of 1 result.</div>
<table class="items table table-striped table-bordered table-condensed">
<thead>
<tr>
<th id="department-grid_c0"><a class="sort-link" href="/index.php?r=department/view&id=903&Department_sort=id">ID<span class="caret"></span></a></th><th id="department-grid_c1"><a class="sort-link" href="/index.php?r=department/view&id=903&Department_sort=designation">Designation<span class="caret"></span></a></th><th class="button-column" id="department-grid_c2"> </th></tr>
<tr class="filters">
<td><div class="filter-container"><input name="Department[id]" type="text" value="903"></div></td><td><div class="filter-container"><input name="User[name]" type="text" maxlength="255" value="John Doe"></div></td><td> </td></tr>
</thead>
<tbody>
<tr class="odd">
<td>903</td><td>John Smith</td><td class="button-column"><a class="view" title="View" rel="tooltip" href="/index.php?r=department/view&id=903"><i class="icon-eye-open"></i></a> <a class="update" title="Update" rel="tooltip" href="/index.php?r=department/update&id=903"><i class="icon-pencil"></i></a> <a class="delete" title="Delete" rel="tooltip" href="/index.php?r=department/delete&id=903"><i class="icon-trash"></i></a></td></tr>
</tbody>
</table>
<div class="keys" style="display:none" title="/index.php?r=department/view&id=903"><span>903</span></div>
</div><script type="text/javascript" src="/assets/468c8877/gridview/jquery.yiigridview.js"></script>
<script type="text/javascript">
/*<![CDATA[*/
jQuery(document).on('click','#department-grid a.delete',function() {
if(!confirm('Are you sure you want to delete this item?')) return false;
var th = this,
afterDelete = function(){};
jQuery('#department-grid').yiiGridView('update', {
type: 'POST',
url: jQuery(this).attr('href'),
success: function(data) {
jQuery('#department-grid').yiiGridView('update');
afterDelete(th, true, data);
},
error: function(XHR) {
return afterDelete(th, false, XHR);
}
});
return false;
});
jQuery('#department-grid').yiiGridView({'ajaxUpdate':['department-grid'],'ajaxVar':'ajax','pagerClass':'pagination','loadingClass':'grid-view-loading','filterClass':'filters','tableClass':'items table table-striped table-bordered table-condensed','selectableRows':1,'enableHistory':false,'updateSelector':'{page}, {sort}','filterSelector':'{filter}','pageVar':'Department_page'});
/*]]>*/
</script>
</div></div></div> </div>
<!-- content -->
</div>
</div>
<div class="clear"></div>
</div>
<!-- page -->
<script type="text/javascript" src="/assets/468c8877/gridview/jquery.yiigridview.js"></script>
<script type="text/javascript">
/*<![CDATA[*/
jQuery(function($) {
jQuery(document).on('click','#department-grid a.delete',function() {
if(!confirm('Are you sure you want to delete this item?')) return false;
var th = this,
afterDelete = function(){};
jQuery('#department-grid').yiiGridView('update', {
type: 'POST',
url: jQuery(this).attr('href'),
success: function(data) {
jQuery('#department-grid').yiiGridView('update');
afterDelete(th, true, data);
},
error: function(XHR) {
return afterDelete(th, false, XHR);
}
});
return false;
});
jQuery('#department-grid').yiiGridView({'ajaxUpdate':['department-grid'],'ajaxVar':'ajax','pagerClass':'pagination','loadingClass':'grid-view-loading','filterClass':'filters','tableClass':'items table table-striped table-bordered table-condensed','selectableRows':1,'enableHistory':false,'updateSelector':'{page}, {sort}','filterSelector':'{filter}','pageVar':'Department_page'});
jQuery('#tabs').tab('show');
jQuery('body').tooltip({'selector':'a[rel=tooltip]'});
jQuery('body').popover({'selector':'a[rel=popover]'});
});
/*]]>*/
</script>
</body></html>
Thank you.