Click here to Skip to main content
15,867,308 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
hi,
i have the issue TypeError: $(...).jqGrid is not a function....
i search something about the solution all solution are same that is change order of loading js file.
i change that is also but the error still there...
my order is below....

File included

HTML
<script src="~/js/jquery-2.0.3.min.js"></script>
<script src="~/js/jquery-1.9.0.min.js"></script>
<script src="~/js/bootstrap.min.js"></script>
<script src="~/jquery-ui-1.11.4.custom/jquery-ui-1.11.4.custom/jquery-ui.min.js"></script>
<script src="~/js/i18n/grid.locale-en.js"></script>
<script src="~/js/jquery.jqGrid.min.js"></script>

<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link href="~/jquery-ui-1.11.4.custom/jquery-ui-1.11.4.custom/jqGrid.bootstrap.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" media="screen" href="http://theme.stepofweb.com/Epona/v1.2/HTML/assets/plugins/jqgrid/css/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="http://theme.stepofweb.com/Epona/v1.2/HTML/assets/css/layout-jqgrid.css" />
<link href="~/jquery-ui-1.11.4.custom/jquery-ui-1.11.4.custom/jquery-ui.css" rel="stylesheet" />


script code is

JavaScript
<script type="text/javascript">

    var editOption = {
        //width: 400, height: 290, left: 20, top: 30,
        reloadAfterSubmit: false,
        jqModal: false,
        editCaption: "Edit Record",
        bSubmit: "Submit",
        bCancel: "Cancel",
        closeAfterEdit: true,
        mtype: "POST",
        editurl: '/Supplier/SaveProduct/'
    };

    var addOption = {
        width: 400, height: 290, left: 20, top: 30,
        reloadAfterSubmit: false, jqModal: false, addCaption: "Add Record",
        bSubmit: "Submit", bCancel: "Cancel",
        closeAfterAdd: true,
        mtype: "PUT",
        url: 'http://localhost:50570/api/Test/'
    };

    var delOption = {
        caption: "Delete",
        msg: "Delete selected record(s)?",
        bSubmit: "Delete", bCancel: "Cancel",
        mtype: "DELETE",
        url: 'http://localhost:50570/api/Test/'
    };

    $(document).ready(function () {

        $("#supplierList").jqGrid({
            url: '/Supplier/SupplierListGridData/',
            datatype: 'json',
            mtype: 'POST',
            colNames: ['Action', 'Supplier Name', 'Country', 'Email', 'Office Phone Number'],
            colModel: [
            { name: 'SupplierName', index: 'SupplierName', align: 'left', sortable: true, editable: false, search: true, stype: 'text', searchoptions: { sopt: ['eq', 'ne'] } },
            { name: 'Country', search: true, index: 'Country', align: 'left', sortable: true, editable: true },
            { name: 'Email', index: 'Email', align: 'left', sortable: true, editable: true },
            { name: 'OfficeMainPhoneNumber', index: 'OfficeMainPhoneNumber', align: 'left', sortable: true, editable: true },

            { name: 'ContactMobile.', index: 'ContactMobile', align: 'left', sortable: true, editable: true },
            ],
            pager: $('#supplierPager'),

            rowNum: 100,
            rowList: [100, 150, 200],
            sortname: 'SupplierName',
            sortorder: "desc",
            viewrecords: true,
            autowidth: true,
            height: '100%',
            scrollOffset: 0,
            shrinkToFit: true,
            gridview: true,
            loadOnce: true,
            editurl: '/Supplier/SaveProduct/',
            cellEdit: true,
            add: true,
            caption: 'Suppliers', rownumbers: true
        }).jqGrid('navGrid', '#supplierPager', {
            search: true, del: true, add: true, edit: true,
            addtext: "Add Record",
            edittext: "Edit Record",
            deltext: "Delete Record",
        }, editOption,
            addOption,
            delOption);


        jQuery("#supplierList").jqGrid('filterToolbar', { defaultSearch: true, stringResult: true });
    });
</script>



Please give a suggestion of correction order of loading js file or solution...

Thank you.
Posted
Comments
ZurdoDev 20-Mar-15 8:32am    
Probably because you're loading 2 versions of jQuery. Don't do that.
An@nd Rajan10 23-Mar-15 0:24am    
@RyanDev
i changed that condition nothing happens,only one version of jquery i tried.
LGM-Developer 23-Mar-15 0:30am    
Correct me if I am wrong, or are there two different grid controls defined in there as well?
An@nd Rajan10 23-Mar-15 0:53am    
Can you give me a solution.pls @ LGM

1 solution

The solution for this is to Load CSS files first and then load script files. This will work fine for you.
You also need to verify which JavaScript files are really loaded and to fix the order of loaded files. For example you need move grid.locale-en.js after jquery-1.11.1.js, I recommend you to remove loading of jquery.jqGrid.js, jqModal.js and jquery.tablednd.js and to load jquery.jqGrid.min.js or jquery.jqGrid.src.js instead. One should first load jQuery, then grid.locale-en.js and then jquery.jqGrid.min.js. By the way you can get jqGrid files from CDN cdnjs.com (see here)
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900