Search code examples
javascriptjqueryjqgrid

jqGrid onSelectRow jqGrid is not a function error

I am trying to get selected row from jqGrid but its failing onSelectedRow event. Gird itself loads the data without any issues. Error only on selected row event. What am i missing here. Below is my javascript code.

The error is "Uncaught TypeError: jQuery(...).jqGrid is not a function"

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link crossorigin="anonymous" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" integrity="sha512-aOG0c6nPNzGk+5zjwyJaoRUgCdOrfSDhmMID2u4+OIslr0GjpLKo7Xm0Ao3xmpM4T8AmIouRkqwj1nrdVsLKEQ==" rel="stylesheet"/>
<link crossorigin="anonymous" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.5/css/ui.jqgrid.min.css" integrity="sha512-xAIWSSbGucVRdutqUD0VLDowcMF/K8W87EbIoa9YUYB4bTyt/zeykyuu9Sjp0TPVdgrgGgBVCBowKv46wY5gDQ==" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/i18n/grid.locale-en.js"></script>
<script src="https://cdn.jsdelivr.net/jqgrid/4.6.0/jquery.jqGrid.min.js"></script>

<script type="text/javascript">

    


    var cellValue;
    var id;
    $("#Demogrid").jqGrid
        ({
            url: "/Job/GetProcess",
            datatype: 'json',
            mtype: 'Get',
            
            //table header name
            colNames: ['ProcessId', 'ProcessTypeName', 'ProcessStatus',
                'ProcessStartTime', 'ProcessEndTime', 'Elapsed'],
            //colModel takes the data from controller and binds to grid
            colModel: [
                { name: "ProcessId" },
                { name: "ProcessTypeName" },
                { name: "ProcessStatus" },
                { name: "ProcessStartTime" },
                { name: "ProcessEndTime" },
                { name: "Elapsed" }
            ],
            height: '100%',
            rowNum: 10,
            loadonce: true,
            pager: jQuery('#pager'),
            rowList: [10, 20, 30, 40],
            caption: 'Process Grid',
            emptyrecords: 'No records',
            footerrow: true,
            iconSet: "fontAwesome",
            userDataOnFooter: true, // use the userData parameter of the JSON response to display data on footer
            jsonReader:
            {
                root: "rows",
                page: "page",
                total: "total",
                records: "records",
                repeatitems: false,
                Id: "0"
            },
            onSelectRow: function (id) {
                debugger;
                var rowData = jQuery(this).jqGrid('viewGridRow', id);
                cellValue = rowData['ProcessId'];
            },
            autowidth: true,
        });

</script>

Also below is the screenshot of the error. enter image description here

Solution

  • I have exactly your code and it is working fine for me. The only exception is that you will need to use document ready function or set script within body like this

    <!DOCTYPE html>
<html lang="en">
<meta charset="utf-8" />
<title>Gurrido  Issues</title>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link crossorigin="anonymous" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" integrity="sha512-aOG0c6nPNzGk+5zjwyJaoRUgCdOrfSDhmMID2u4+OIslr0GjpLKo7Xm0Ao3xmpM4T8AmIouRkqwj1nrdVsLKEQ==" rel="stylesheet"/>
<link crossorigin="anonymous" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.5/css/ui.jqgrid.min.css" integrity="sha512-xAIWSSbGucVRdutqUD0VLDowcMF/K8W87EbIoa9YUYB4bTyt/zeykyuu9Sjp0TPVdgrgGgBVCBowKv46wY5gDQ==" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/i18n/grid.locale-en.js"></script>
<script src="https://cdn.jsdelivr.net/jqgrid/4.6.0/jquery.jqGrid.min.js"></script>

</head>
<body>
<table id ="Demogrid"></table>
<div id="pager"></div>
<script type="text/javascript">
    var cellValue;
    var id;
    $("#Demogrid").jqGrid
...
     });

</script>

</body>
</html>