Leaflet Load Data And Edit Feature Properties On Mouse Click

I am loading map data from a GeoJSON file and attaching a click event for every polygone. on click, the script should fetch data from the server AND modify one of the clicked polyg

Solution 1:

The solution is to send the desired variable e to the anonymous function by using the context entry:

functiononClick(e) {
    var status = e.target.feature.properties.ACCESS;
    $.ajax({
        url: "http://127.0.0.1:8080/?&u=x&p="+e.target.feature.properties.ID_PARCELL,
        dataType: 'jsonp',
        context: e,
        type: 'GET',
        success: function(data) {
        status = data.status;
        e.target.feature.properties.ACCESS = data.status;
        e.target.bindPopup("Owner: <b>"+ data.status +"</b>").openPopup();
        },
        error: function(data){console.log(data)}
    });
    e.target.feature.properties.ACCESS = status;
    map.fitBounds(e.target.getBounds());
}

Solution 2:

You'r using the same event name 'e' on both Click and success functions. Try to change one of them. ie

functiononClick(e) {
     var status = e.target.feature.properties.ACCESS;
     $.ajax({
         url: "http://127.0.0.1:8080/?&u=x&p="+e.target.feature.properties.ID_PARCELL,
         dataType: 'jsonp',
         type: 'GET',
         success: function(data, evt) {
             status = data.status;
             e.target.feature.properties.ACCESS = data.status;
             e.target.bindPopup("Owner: <b>"+ data.status +"</b>").openPopup();
        },
        error: function(data){console.log(data)}
     });
     e.target.feature.properties.ACCESS = status;
     map.fitBounds(e.target.getBounds());
 }

now you can change the initial event 'e' properties when the result is returned. Hope this helps.