TypeError: $(…).jqGrid is not a function on button click to trigger reload

问题

My grid loads fine for the first time. But on button click , I need to reload the grid and it gives the error 'TypeError: $(...).jqGrid is not a function'.

This happens both in firefox and chrome. Please help.

<link rel="stylesheet" type="text/css" media="screen" href="<%=request.getContextPath()%>/themes/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="<%= request.getContextPath()%>/themes/jquery-ui-1-10-TW-custom/jquery-ui-1.10.2.custom.css" />
<LINK rel=STYLESHEET href="<%= request.getContextPath()%>/themes/jquery-ui-timepicker-addon.css"    rel="stylesheet" type="text/css"></LINK>

<script type='text/javascript' src="<%= request.getContextPath()%>/js/i18n/grid.locale-en.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.js" type="text/javascript"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"  type="text/javascript"></script>
<script type='text/javascript' src="<%= request.getContextPath()%>/js/jquery.jqGrid.js"></script>
<script type='text/javascript' src="<%= request.getContextPath()%>/js/plugins/jqModal.js"></script>
<script type='text/javascript' src="<%= request.getContextPath()%>/js/plugins/jquery.tablednd.js"></script>
<script language="javascript" src="<%=request.getContextPath()%>/js/jquery/jquery-ui-timepicker-addon.js" type="text/javascript"></script>



<script type="text/javascript">
$(document).ready(function()
{
    $("#gridData").jqGrid({
    url:contextPath + "/psapi/esppPreclearance.do?method=gridData&stockClass="+ $("[name=stockClass]").val()+"&transactionType="+$("[name=transactionType]").val(),
    datatype: "json",
    colNames:['<bean:message key="plansetup.label.stockclass" />','<bean:message    key="windowPeriod.label.dispTypeCode" />',
           '<bean:message key="windowPeriod.label.fromDate" />', '<bean:message key="windowPeriod.label.toDate" />', '<bean:message key="windowPeriod.label.ParticipantLevel" />',
        '<bean:message  key="participantBenificiary.label.seqNo" />',
           '<bean:message   key="windowPeriod.label.product" />', '<bean:message    key="windowPeriod.label.participantGrp" />', 
           '<bean:message   key="participantGroup.label.Participant-id" />','<bean:message  key="common.label.activeStatus" />'],
         autowidth: true,
    pager: '#pager',
    colModel:[
        {name:'stockClass',index:'stockClass', width:60},
        {name:'transTypeDesc',index:'transTypeDesc', width:90},
        {name:'frmDate',index:'fromDate', width:100, sorttype:"date"},
        {name:'toDate',index:'toDate', width:100, sorttype:"date"},
        {name:'prdLvlDesc',index:'prdLvlDesc', width:80, align:"right",sorttype:"float"},
        {name:'prdSeqNo',index:'prdSeqNo', width:30, align:"right"},        
        {name:'productId',index:'productId', width:80, align:"right",sorttype:"int"},       
        {name:'partGroup',index:'partGroup', width:30, align:"right",},
        {name:'globalId',index:'globalId', width:80, align:"right",},
        {name:'activeFlg',index:'activeFlg', width:50, align:"center    "},
    ],
    loadonce: true,
    multiselect: false,
    rowNum:20,
    viewrecods: true,
    rowlist:[10,20,30,40,50],
    height:463,


});




jQuery("#gridData").jqGrid('navGrid','#pager',{add:false,edit:false,del:false});


$("[name=btnFind]").click(function()
        {
            $("#gridData").jqGrid("setGridParam", {datatype: "json"}).trigger("reloadGrid");
            alert("I AM OUT");

        });




});
</script>

回答1:

The error means that either jqGrid or some dependent JavaScript file was not loaded or unsuccessfully loaded (loaded in the wrong order for example).

You need 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).

回答2:

@Olga, thank you again for taking the time to respond. I took to your word and debugged and saw multiple versions of jquery files were present in my workspace. I removed them all and kept, only 1 version and the code started working file. Thanks again for your help

回答3:

@GMK It may be occurred by below reasons

1. if you are using more than one jquery file i.e. Layout/template has one and other one in view/HTML file

2. If you have diffrent version files

来源：https://stackoverflow.com/questions/26370345/typeerror-jqgrid-is-not-a-function-on-button-click-to-trigger-reload

标签

jqgrid