jqGrid jette "erreur de syntaxe Uncaught, expression non reconnue: #"

Question

Bonjour à tous :) Je suis désolé pour la longue liste de code, mais je ne suis pas sûr exactement où je suis bousiller ici. J'écris un plugin jquery à usage interne uniquement pour éditer les listes de contrôle d'accès.

Un composant de l'éditeur ACL est le plugin jqGrid, qui est une excellente implémentation de la grille, qui est livré avec ses propres facilités de chargement AJAX et autres. J'ai déjà utilisé ce composant, mais je n'ai jamais essayé de l'utiliser comme sous-composant d'un plugin auparavant. La requête AJAX est envoyée correctement (d'après ce que je vois dans le débogueur de Chrome), ce qui me porte à croire que le bug ne se trouve pas dans mon code, mais je ne sais pas quoi faire à ce stade.

Je suis désolé pour la grande quantité de code, mais c'est l'exemple minimal que je pouvais penser.

/*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)); 

Pourquoi suis-je "Uncaught Erreur de syntaxe, expression non reconnue: #" sur la ligne 75 de jquery.js?

Oh, et j'utilise jqgrid 3.8.1 et jquery 1.4.2.

EDIT: Le retour JSON est:

{"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

Ok, désolé tout le monde. Trouvé le problème - s'avère que jqGrid enregistre l'ID de la balise de table, puis référence la table plus tard en utilisant cette balise. Donner le <table> un ID a résolu le problème.

Answer 2

Si quelqu'un venait à chercher cette erreur avec "jqGrid for ASP.NET MVC". J'ai eu cette erreur exacte sur la sauvegarde d'une boîte de dialogue "Ajouter un nouveau".

Comme il se trouve, je n'avais pas défini "MyGridModel.AddDialogSettings.CloseAfterAdding = true;"