Ajax not firing after I added a GeoJson 'data'

Question

I have an HTML page where a button click will fire an ajax function showDetail():

<a href="#" class="list-group-item" onclick="showDetail({{ test.id }});">
<strong>{{ test.test_name }}</strong></a>

The ajax function works well if it's like this on its own:

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});
    }
});
}

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:

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});
    }
});
}

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?

Thank you!

Edit: Additional info - Django Framework templating

Contents of test_geojson showing on Leaflet map so it's most likely validated: Big geojson feature but would look generally like so:

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
            }
         }
         ]
       }

Edit: Temporary Solution

This looks like on the right direction. Serializing the JSON data to string, adding csrf, then modify things at views.py. However an error occurs, saying that it has exceeded Data Upload Max Memory Size so I had to set DATA_UPLOAD_MAX_MEMORY_SIZE = None which is a security no-no. If someone has a better workaround it'll be helpful!

var geojsonFeature = {{tests_geojson|safe}};
function showDetail(id){
    $.ajax({
    beforeSend: function(xhr, settings) {
            if (!csrfSafeMethod(settings.type) && !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});
    }
});
}

It is probably unable to serialize it. Can you add content of `tests_geojson`. — Brahma Dev, Oct 23 '17 at 08:08
are you using a framework (angular?) for these placeholders (`{{ tests_geojson | safe}}`) to be replaced? is the function `showDetail` in a template? — Kaddath, Oct 23 '17 at 08:08
If it's angular then you can't use {{ var }} in javascript. It's only allowd in html templates. Try to replace {{ tests_geojson | safe}} with some value — Thomas Sablik, Oct 23 '17 at 08:12
You can use the browser network monitor to debug. When I replace {{ tests_geojson | safe}} with a constant value like 123 then it works for me. — Thomas Sablik, Oct 23 '17 at 08:14
After I removed the django templates it works. So I think the error is somewhere else. https://plnkr.co/edit/i4fjA2hbQbtaSz0Nbo2Y — Thomas Sablik, Oct 23 '17 at 08:27
seems like it... If no one can explain why maybe I'll really have to find another way to retrieve it. :( — Reiion, Oct 23 '17 at 08:30

Ajax not firing after I added a GeoJson 'data'

0 Answers0