title: Ajax not firing after I added a GeoJson 'data'
body: <p>I have an HTML page where a button click will fire an ajax function <code>showDetail()</code>:</p>
  
  <pre><code>&lt;a href="#" class="list-group-item" onclick="showDetail({{ test.id }});"&gt;
  &lt;strong&gt;{{ test.test_name }}&lt;/strong&gt;&lt;/a&gt;
  </code></pre>
  
  <p>The ajax function works well if it's like this on its own:</p>
  
  <pre><code>function showDetail(id){
      $.ajax({
      url : "/test/" + id,
      type: 'GET',
      success: function(data){
          map.removeLayer(tests);
          $('#pane-content-edit').html(data);
          $('.tests_display').animate({right:0});
      }
  });
  }
  </code></pre>
  
  <p>I would like to modify it having the current HTML page containing a Geojson. And I'd like to pass it to my ajax to pass it to the url my ajax is pointing at. So I did this:</p>
  
  <pre><code>function showDetail(id){
      $.ajax({
      url : "/test/" + id,
      type: 'GET',
      data: {'tests_geojson' : {{ tests_geojson | safe}}},
      success: function(data){
          map.removeLayer(tests);
          $('#pane-content-edit').html(data);
          $('.tests_display').animate({right:0});
      }
  });
  }
  </code></pre>
  
  <p>After adding that, it would not fire. I tried opening up the web console, nothing is happening. Can someone help? or tell me how to debug this? </p>
  
  <p>Thank you!</p>
  
  <p>Edit:
  Additional info  - Django Framework templating</p>
  
  <p>Contents of <code>test_geojson</code> showing on Leaflet map so it's most likely validated: Big geojson feature but would look generally like so:</p>
  
  <pre><code>alert(JSON.stringify(geojsonFeature));
  
  
  
  { "type": "FeatureCollection",
        "features": [
          { "type": "Feature",
            "geometry": {"type": "Point", "coordinates": [102.0, 0.5]},
            "properties": {"prop0": "value0"}
            },
          { "type": "Feature",
            "geometry": {
              "type": "LineString",
              "coordinates": [
                [102.0, 0.0], [103.0, 1.0], [104.0, 0.0], [105.0, 1.0]
                ]
              },
            "properties": {
              "prop0": "value0",
              "prop1": 0.0
              }
           }
           ]
         }
  </code></pre>
  
  <blockquote>
    <p>Edit: Temporary Solution</p>
  </blockquote>
  
  <p>This looks like on the right direction. <a href="https://stackoverflow.com/questions/23594823/django-passing-ajax-post-data-to-django-yields-multivaluedictkeyerror-even-thou">Serializing the JSON data to string</a>, adding <code>csrf</code>, then modify things at <code>views.py</code>. However an error occurs, saying that it has exceeded Data Upload Max Memory Size so I had to set <code>DATA_UPLOAD_MAX_MEMORY_SIZE = None</code> which is a security no-no. If someone has a better workaround it'll be helpful!</p>
  
  <pre><code>var geojsonFeature = {{tests_geojson|safe}};
  function showDetail(id){
      $.ajax({
      beforeSend: function(xhr, settings) {
              if (!csrfSafeMethod(settings.type) &amp;&amp; !this.crossDomain) {
                  xhr.setRequestHeader("X-CSRFToken", csrftoken);
              }
          },
      url : "/test/" + id,
      type: 'POST',
      data: {'tests_geojson' : JSON.stringify(geojsonFeature)},
      success: function(data){
          map.removeLayer(tests);
          $('#pane-content-edit').html(data);
          $('.tests_display').animate({right:0});
      }
  });
  }
  </code></pre>