jqxGrid fails with error "Object [object Object] has no method 'jqGrid'"

Question

I am trying to embed jqxgrid into my HTML page.

This are the libraries that I import:

<script src="./wicket/resource/org.apache.wicket.resource.JQueryResourceReference/jquery/jquery-1.10.1-ver-1379671500000.js"></script>
<script src="./wicket/resource/org.apache.wicket.ajax.AbstractDefaultAjaxBehavior/res/js/wicket-event-jquery-ver-1379671500000.js"></script>
<script src="./wicket/resource/org.apache.wicket.ajax.AbstractDefaultAjaxBehavior/res/js/wicket-ajax-jquery-ver-1379671500000.js"></script>
<script src="/jquery/jquery-ui.min.js"></script>
<script src="/jqwidgets/jqxcore.js"></script>
<script src="/jqwidgets/jqxdata.js"></script>
<script src="/jqwidgets/jqxbuttons.js"></script>
<script src="/jqwidgets/jqxscrollbar.js"></script>
<script src="/jqwidgets/jqxmenu.js"></script>
<script src="/jqwidgets/jqxcheckbox.js"></script>
<script src="/jqwidgets/jqxlistbox.js"></script>
<script src="/jqwidgets/jqxdropdownlist.js"></script>
<script src="/jqwidgets/jqxgrid.js"></script>
<script src="/jqwidgets/jqxgrid.columnsresize.js"></script>
<script src="/jqwidgets/jqxgrid.edit.js"></script>
<script src="/jqwidgets/jqxgrid.filter.js"></script>
<script src="/jqwidgets/jqxgrid.pager.js"></script>
<script src="/jqwidgets/jqxgrid.selection.js"></script>
<script src="/jqwidgets/jqxgrid.sort.js"></script>

I omitted type="text/javascript" for simplicity reasons. As you can see the whole think is a wicket application, so I can't really influence the first three imports.

I implemented the jqxgrid as follows:

<script type="text/javascript">
    $(document).ready(function() {
        var theme = "smoothness";
        var dataAdapter = new $.jqx.dataAdapter(data);
        $("#jqxgrid").jqxGrid({
            width : "99%",
            autoheight: true,
            theme : theme,

            // many more configuration options

            columns: [ /* column declaration */ ]
        });

        // events
        $("#jqxgrid").on('cellendedit', function(event) {
            var args = event.args;

            $.post("EditResponse", {
                id: $('#jqxgrid').jqGrid('getCell',args.rowindex,'Name'),
                value: args.value
            });
        });
    });
</script>

Again I omitted (in my opinion) unnecessary details, as the initializaton of jqxgrid works fine, I see the table with every data I want it to show.

But when I edit a cell and end editing, the row

$('#jqxgrid').jqGrid('getCell',args.rowindex,'Name')

yields an error in the console:

TypeError: Object [object Object] has no method 'jqGrid'

I did some research but could not fine a clear explanation. Any experiences what could be wrong? Any import I forgot? Anything in the wrong order?

Answer 1

type Error, change

$('#jqxgrid').jqGrid(... 

to

$('#jqxgrid').jqxGrid(...