title: Bind jqGrid to JSON Object
body: <p>How do I bind a simple JSON Object to a jqGrid?</p>
  
  <p>Here's what I have:</p>
  
  <pre><code>    var tableSrc = { "page":"1", "total":1, "records":"3", "rows": [
          { "title": "Title1", "subtitle": "subTitle", "authors": ["a1", "a2", "a3"] },
          { "title": "Title2", "subtitle": "subtitle", "authors": ["X", "Y"] },
          { "title": "Title3", "subtitle": "subTitle", "authors": ["1", "2", "3", "4"]}]
      };
  
      $(".jqGridTarget").jqGrid({
          datastr: tableSrc,
          datatype: "jsonstring",
          colNames: ['title', 'subtitle'],
          colModel: [
              { name: 'title', index: 'title', width: 55 },
              { name: 'subtitle', index: 'subtitle', width: 90}]
      });
  </code></pre>
  
  <p>And then:    </p>
  
  <pre><code>&lt;table class="jqGridTarget"&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>This yields the error:</p>
  
  <blockquote>
    <p>Uncaught Syntax error, unrecognized expression: # inside of jQuery 1.6.2</p>
  </blockquote>
  
  <p>I've also tried using json instead of jsonstring with data replacing datastr.  That eliminates the error, but the grid is still empty.  In both cases undefined appears, or flashes in the grid body.</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>I've also tried datatype: "local" with tableSrc as data.  No error or undefined, but still no data in grid.</p>
  
  <p><strong>END EDIT</strong></p>
  
  <p>Also, here are the script/css files I have referenced:</p>
  
  <pre><code>&lt;script type='text/javascript' src='jquery.min.js'&gt;&lt;/script&gt;
  &lt;script type='text/javascript' src='jquery.tmpl.js'&gt;&lt;/script&gt;
  &lt;script type='text/javascript' src='jquery.jqGrid.min.js'&gt;&lt;/script&gt;
  &lt;script type='text/javascript' src='knockout-1.2.1.js'&gt;&lt;/script&gt;
  &lt;link rel="Stylesheet" type="text/css" href="ui.jqgrid.css" /&gt;
  </code></pre>