TypeError: $(...).jqGrid is not a function

Question

i want create jqgrid table.. but i have found error and confused to fix this.

i already, search tutorial but do not 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 thank's.

Solution

Try including jquery ui before other plugin scripts. Maybe this is the issue:

    <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" />

Comments

[K K]

Check the updated answer and also refer this answer:stackoverflow.com/questions/28134703/…