jqGrid throws "Uncaught Syntax error, unrecognized expression: #"

Question

Hello everyone :) I'm sorry for the long code listing, but I'm not sure exactly where I'm screwing up here. I'm writing an internal-use-only jquery plugin for editing access control lists.

A component of the ACL editor is the jqGrid plugin, which is an excellent grid implementation, which comes with it's own AJAX loading facilities and such. I've used this component before, but I've never tried to use it as a subcomponent of a plugin before. The AJAX request is being sent out correctly (from what I see in Chrome's debugger), which leads me to believe the bug does not lie in my code, but I'm unsure what to do at this point.

I'm sorry for the large amount of code, but this is the minimal example I could think of.

/*global jQuery*/
"use strict"; /* Enable ECMAScript 5 Strict Mode if supported */
(function ($) {
    var methods, defaults;

    methods = {
        init: function (options) {
            var sid, pager, enumerateUrl;
            if (this.data('isAclEditor')) {
                $.error('The targeted element is already an ACL Editor.');
            } else {
                this.data('isAclEditor', true);
            }
            this.data('options', $.extend(true, {}, defaults, options));
            /*
             <div class="ui-jqgrid ui-widget ui-widget-content">
                <div class="ui-jqgrid-titlebar ui-widget-header ui-helper-clearfix">
                    <span class="ui-jqgrid-title">TITLE</span>
                </div>
                <table class="sidList"></table>
                <div class="sidPager"></div>
                <div class="privSlideout" style="display:none;">
                    <table cellspacing="0" cellpadding="0" border="0">
                        <thead>
                            <tr>
                                <th class="ui-th-column ui-state-default" colspan="3" class="privLabel"></th>
                            </tr>
                            <tr>
                                <th class="ui-th-column ui-state-default" style="width: 50px;">Allow</th>
                                <th class="ui-th-column ui-state-default" style="width: 50px;">Deny</th>
                                <th class="ui-th-column ui-state-default" style="width: 520px;">Privilege</th>
                            </tr>
                        </thead>
                        <tbody class="privTable">
                        </tbody>
                    </table>
                    <button class="btnOk">Ok</button>
                    <button class="btnCancel">Cancel</button>
                </div>
                <div style="display:none;" class="newPrivPicker">
                    <div style="font-size: 10pt">
                        <table class="newPrivTable"></table>
                        <div class="newPrivPager"></div>
                    </div>
                </div>
             </div>
             */
            this.html('<div class="ui-jqgrid ui-widget ui-widget-content"><div class="ui-jqgrid-titlebar ui-widget-header ui-helper-clearfix"><span class="ui-jqgrid-title">' + this.data('options').title + '</span></div><table class="sidList"></table><div class="sidPager"></div><div class="privSlideout" style="display:none;"><table cellspacing="0" cellpadding="0" border="0"><thead><tr><th class="ui-th-column ui-state-default" colspan="3" class="privLabel"></th></tr><tr><th class="ui-th-column ui-state-default" style="width: 50px;">Allow</th><th class="ui-th-column ui-state-default" style="width: 50px;">Deny</th><th class="ui-th-column ui-state-default" style="width: 520px;">Privilege</th></tr></thead><tbody class="privTable"></tbody></table><button class="btnOk">Ok</button><button class="btnCancel">Cancel</button></div><div style="display:none;" class="newPrivPicker"><div style="font-size: 10pt"><table class="newPrivTable"></table><div class="newPrivPager"></div></div></div></div>');
            pager = $('.sidPager', this);
            enumerateUrl = this.data('options').aclControllerUrl + '/enumerate/aclid/' + this.data('options').aclId;
            sid = $('.sidList', this).jqGrid({
                url: enumerateUrl,
                datatype: 'json',
                mtype: 'GET',
                colNames: ['Type', 'Name'],
                colModel: [
                    {name: 'type', index:'type', width: 20, align: 'center', sortable: false},
                    {name: 'displayName', index:'displayName', align: 'center', sortable: false}
                ],
                rowNum: 10,
                rowList: [10, 100, 1000],
                autowidth: true,
                height: 'auto',
                forceFit: true,
                gridview: true,
                pager: pager
            });
            sid.navGrid(pager, {
                edit:false,
                add:false,
                del:false,
                search:false,
                refresh:true,
                refreshtitle: 'Refresh Users and Groups'
            });
            return this;
        }
    };

    defaults = {
        aclId: 0,
        title: 'Permissions Editor',
        aclControllerUrl: ''
    };

    $.fn.acleditor = function (method) {
        if (methods[method]) {
            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof method === 'object' || !method) {
            return methods.init.apply(this, arguments);
        } else {
            $.error('Method ' +  method + ' does not exist on jQuery.AclEditor.');
        }
        return null;
    };

}(jQuery));

Why do I get "Uncaught Syntax error, unrecognized expression: #" on line 75 of Jquery.js?

Oh, and I'm using jqgrid 3.8.1 and jquery 1.4.2.

EDIT: The returned JSON is:

{"rows":[{"id":"7109766F-DC8A-4134-8C1F-02F87A72DE9C","cell":["Group","Developers"]},{"id":"22EEB0C5-6792-4C24-8047-B187D38F63EC","cell":["Group","Users"]}],"page":1,"total":1,"records":2}

Erewhile

Answer 1

Okay, sorry everyone. Found the problem -- turns out jqGrid saves the ID of the table tag, and then references the table later using that tag. Giving the <table> an ID fixed the problem.

Erewhile

Had the same error, was looking for a bug for over an hour. This answer saved me, thanks! Also, this was not a problem with older versions of jqGrid. It stopped working when I upgraded from 3.5.3 to 3.8.2. – Seafowl

Just to help clarify -- he's talking about doing this <table id="orderTable"></table> instead of this <table class="orderTable"></table> – Cynara

@010110110101: I did say ID, not class. :) – Erewhile

Thank you, Billy, big timesaver there. What an idiotic bug. If jqGrid needs the table to have an id, it should either supply one if there isn't one, or fail on initialization with a meaningful error message. – Obeah

@T.J.Crowder: Agreed. OTOH it really shouldn't need an ID at all and just save a reference to the DOM element it needs directly. – Erewhile

@BillyONeal: Completely agreed, although on IE there are/were issues with circular references, they may have been trying to avoid that since they do (apparently) add expando properties to the DOM element that may well be closures over the context that would (if they did that) hold the element reference... – Obeah

@T.J.Crowder: Yes, there are minor circular ref issues on older versions of IE; but the worst case is they leak a few bytes while the page is running. It's not like this is a performance sensitive piece of code. – Erewhile

@BillyONeal: Rather more than a few bytes. If there's an expando on the table pointing to a function closing over a context with a variable pointing to the table, the entire table element and its contents will be stuck in memory even after it's removed (on some versions of IE; I don't know when/whether they've fixed it). But again, completely agree that this should be handled in a much better way. – Obeah

Answer 2

If anyone ever comes searching for this error with "jqGrid for ASP.NET MVC". I got this exact error on the save of an "add new" dialog.

As it turns out, I had not set "MyGridModel.AddDialogSettings.CloseAfterAdding = true;"

Microfarad