leaflet - GeoServer Callback Function Undefinded

Any idea why the function loadThis() comes back as undefined? I've tried adding jsonp: false which doesn't help either. The json object is returned properly, I can view it in FireBug, but I can't get it to the callback function. Hope it's something simple I've missed,

var geojsonLayer = new L.GeoJSON();

function loadThis(data) {
    console.log(data);
}

$.ajax({

    url : "http://geoserver.capecodgis.com/geoserver/capecodgis/ows?service=WFS&version=1.1.0&request=GetFeature&typeName=capecodgis:tracts_2010_4326&maxFeatures=2&outputFormat=json&format_options=callback:loadThis",
    dataType : 'jsonp'
});

map.addLayer(geojsonLayer);

Answer

Things to change to make this work:

• use jsonpCallback in your $.ajax call to provide the name of callback function


• use success to specify a function to handle your data once it is retrieved



• note that the callback name and the name of the function used to process your data need to be different

Here's working code:

var geojsonLayer = new L.GeoJSON();

function handleJson(data) {
  console.log(data)
  geojsonLayer.addData(data); 
}


$.ajax({
  url : "http://geoserver.capecodgis.com/geoserver/capecodgis/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=capecodgis:tracts_2010_4326&maxFeatures=2&outputFormat=json&format_options=callback:getJson",
  dataType : 'jsonp',
  jsonpCallback: 'getJson',
  success: handleJson
});

map.addLayer(geojsonLayer);