TypeError: $ (...). JqGrid is not a function
I want to create a jqgrid table .. but I found an error and was confused to fix it.
i already, search for a tutorial, but don't run :(
This is my screenshot
This is my script:
index.php
<script src="js/jqgrid/js/jquery-1.5.2.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" media="screen" href="js/jquery-ui/css/custom-theme/jquery-ui-1.8.16.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="js/jqgrid/css/ui.jqgrid.css" />
<script src="js/jqgrid/js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jqgrid/js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="js/jquery-ui/js/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
<style type="text/css">
div.ui-datepicker
{ font-size:10px; }
div.ui-dialog
{ font-size:11px; }
div.ui-tabs
{ font-size:11px; }
.ui-jqgrid tr.jqgrow td {
white-space: normal !important;
}
.center { width: 640px; margin-left: auto; margin-right: auto; }
</style>
<style type="text/css">.ui-jqgrid .ui-jqgrid-bdiv { overflow-y: scroll }</style>
grid_javascript.php
<?php
Header("content-type: application/x-javascript");
include "../connection.php";
switch ($_GET['type'])
{
case "all_user":
{
echo " $(document).ready(function(){
$('#tbl_all_user').jqGrid({
url:'grid_javascript_data.php?type=all_user',
datatype: 'json',
colNames:['Action','User Group','Username','Real Name','Last Update','Email'],
colModel:[
{name:'action',index:'action', width:150,align:'center', sortable:false},
{name:'user_group',index:'user_group', width:150, align:'center',searchoptions:{sopt:['eq','cn']}},
{name:'username',index:'username', width:150, align:'center',searchoptions:{sopt:['eq','cn']}},
{name:'real_name',index:'real_name', width:150, align:'center',searchoptions:{sopt:['eq','cn']}},
{name:'last_update',index:'last_update', width:150, align:'center',searchoptions:{sopt:['eq','cn']}},
{name:'email',index:'email', width:150, align:'center',searchoptions:{sopt:['eq','cn']}}
],
pager: jQuery('#div_all_user'),
rowNum:50,
sortname:'username',
sortorder:'desc',
viewrecords: true,
caption: 'Manage All User',
height:$(document).height()*0.7,
width:$(document).width() - 30,
shrinkToFit:true,
// autowidth:true,
toolbar: [false,'top'],
});
jQuery('#tbl_all_user').jqGrid('navGrid','#div_all_user',{edit:false,add:false,del:false},
{}, // edit options
{}, // add options
{}, //del options
{multipleSearch:true,width:400});
}); ";
break;
}
}
?>
grid_javascript_data.php
<?php
set_time_limit (9999999999999999);
Header('Content-Type: text/javascript; charset=UTF-8');
include "../connection.php";
switch ($_GET['type'])
{
case "all_user": {
$page = $_REQUEST['page'];
$limit = 20;
$sidx = $_REQUEST['sidx'];
$sord = $_REQUEST['sord'];
//$user_id = _REQUEST['user_id'];
$wh_ews = "";
$searchOn = Strip($_REQUEST['_search']);
if($searchOn=='true')
{
$searchstr = Strip($_GET['filters']);
$wh_ews = constructWhere($searchstr);
$manual_search="1";
}
$result = mysql_query("SELECT COUNT(*) AS count FROM tbl_user where user_group in ('user','channel_admin')");
$row = mysql_fetch_array($result,MYSQL_ASSOC);
$count = $row['count'];
if( $count > 0 ) {
$total_pages = ceil($count/$limit);
}
else {
$total_pages = 0;
}
if ($page > $total_pages) $page=$total_pages;
$start = $limit*$page - $limit; // do not put $limit*($page - 1)
if($start <0) $start = 0;
$SQL = "SELECT * FROM tbl_user where user_group in ('user','channel_admin') ".$wh_ews;
$result = mysql_query( $SQL ) or die("Couldn't execute query.".mysql_error());
$responce->page = $page;
$responce->total = $total_pages;
$responce->records = $count;
$i=0;
while($row = mysql_fetch_array($result,MYSQL_ASSOC)) {
$link_all= "Detail | Edit | Hapus";
$responce->rows[$i]['id']=$i;
$responce->rows[$i]['cell']=array($link_all,$row['user_group'],$row['username'],$row['real_name'],$row['last_update'],$row['email']);
$i++;
}
echo json_encode($responce);
break;
}
}
Help me to thank.
+3
source to share
1 answer
Try including jquery ui before other plugin scripts. Maybe this is the problem:
<script src="js/jqgrid/js/jquery-1.5.2.min.js" type="text/javascript"></script>
<script src="js/jquery-ui/js/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
<script src="js/jqgrid/js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jqgrid/js/jquery.jqGrid.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" media="screen" href="js/jquery-ui/css/custom-theme/jquery-ui-1.8.16.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="js/jqgrid/css/ui.jqgrid.css" />
+2
source to share