title: django, slickgrid, and json loading
body: <p>I'm trying to learn how to use a javascript based editable grid system with Django. It's pretty confusing for someone brand new to javascript as well as ajax and json handling within django.</p>
  
  <p>I've been looking at <a href="https://github.com/mleibman/SlickGrid" rel="nofollow">SlickGrid</a> because it seems to do what I want it too, mainly editable fields that are quickly sorted, filtered, and searched. I'd be open to other packages with similar functionality. </p>
  
  <p>I'm stuck on populating the grid with my json. I'm not even sure it's the js or the format of the json which is the problem.</p>
  
  <p>Here is a simplified example.</p>
  
  <p>I'm 'serving' the json with the following view:</p>
  
  <pre><code>from django.core.serializers import serialize
  
  def json_testing(request):
      json = serialize("json", FooBar.objects.all())
      return HttpResponse(json, mimetype='application/json')
  # urls.py is configured to access this at /json_testing/
  </code></pre>
  
  <p>Here's the output of the json at www.example.com/json_testing/ :</p>
  
  <pre><code>[
    - {
          pk: 1
          model: "myapp.foobar"
        - fields: {
              foo: "test"
              bar: "test"
          }
      },
    - {
          pk: 2
          model: "myapp.foobar"
        - fields: {
              foo: "test2"
              bar: "test2"
          }
      }
  ]    
  </code></pre>
  
  <p>And here's my template:</p>
  
  <pre><code>{% extends 'base.html' %}
  {% block head %}
  &lt;title&gt;SlickGrid example 1: Basic grid&lt;/title&gt;
  &lt;link rel="stylesheet" href="/static/SlickGrid/slick.grid.css" type="text/css" media="screen" charset="utf-8" /&gt;
  &lt;link rel="stylesheet" href="/static/SlickGrid/css/smoothness/jquery-ui-1.8.5.custom.css" type="text/css" media="screen" charset="utf-8" /&gt;
  &lt;link rel="stylesheet" href="/static/SlickGrid/examples/examples.css" type="text/css" media="screen" charset="utf-8" /&gt;
  {% endblock %}
  {% block content %}
  &lt;div width="100%"&gt;
      &lt;div id="myGrid" style="width:600px;height:500px;display:none;"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;script src="/static/SlickGrid/lib/jquery-1.4.3.min.js"&gt;&lt;/script&gt;
  &lt;script src="/static/SlickGrid/lib/jquery.event.drag-2.0.min.js"&gt;&lt;/script&gt;
  &lt;script src="/static/SlickGrid/slick.core.js"&gt;&lt;/script&gt;
  &lt;script src="/static/SlickGrid/slick.grid.js"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
  var grid;
  
  var columns = [
      {id:"foo", name:"Foo", field:"foo"},
      {id:"bar", name:"Bar", field:"bar"}
  ];
  
  var options = {
      enableCellNavigation: true,
      enableColumnReorder: false
  };
  
  $(function() {
      var data = [];
      for (var i = 0, i &lt; 50; i++) {
          data[i] = {
              foo: "foo_" + i,
              bar: "bar_" + i,
          };
      }
  
  // I want to replace the loop to generate code above with json
  // I think something along the lines of this
  //    $.get_json('/json_testing/')
  
      grid = new Slick.Grid("#myGrid", data, columns, options);
  
      $("#myGrid").show();
  })
  &lt;/script&gt;
  {% endblock %}
  </code></pre>
  
  <p>I know the answer to this is probably pretty basic. Maybe it's so basic that's why it's hard to find an existing answer on the web.</p>
  
  <p>Every method for loading the json that I've tried from other answers, blogs, etc has resulted in a blank grid being rendered. <strong>What do I need to do to get my json loaded?</strong></p>