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}

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.