OpenLayers WFS request on mouseclick to GeoServer doesn't load features into vector layer - openlayers-3

Question

I would appreciate advice on getting an OpenLayers WFS request to GeoServer working in OL3.2 or later, triggered by a mouse singleclick.
By way of background, I have had this working fine for a year at http://maps.nls.uk/geo/find/ using OL 3.1. However, Firefox version 43.0 records the mouse click event at the top left corner of the map canvas, not on the real pixel location clicked on - earlier versions of Firefox, Chrome and IE record the correct pixel location on the canvas. From my basic tests, later versions of OL after 3.1 record the correct pixel location using Firefox 43.0, so I would like to upgrade to a newer version of OL.
My original code in OL3.1 is as follows:
var urlgeoserver = 'http://geoserver2.nls.uk/geoserver/wfs?service=WFS' +
'&version=1.1.0&request=GetFeature&typename=' + TypeName +
'&outputFormat=text/javascript&format_options=callback:loadFeatures' +
'&srsname=EPSG:3857&cql_filter=INTERSECTS(the_geom,POINT('
+ point27700[0] + ' ' + point27700[1] + '))';
}
var vectorSource = new ol.source.ServerVector({
format: new ol.format.GeoJSON(),
loader: function(extent, resolution, projection) {
var url = urlgeoserver
$.ajax({
url: url,
dataType: 'jsonp',
jsonpCallback: 'loadFeatures',
success: handleJson
});
},
strategy: ol.loadingstrategy.createTile(new ol.tilegrid.XYZ({
maxZoom: 19
})),
projection: 'EPSG:3857'
});
function handleJson(data) {
vectorSource.addFeatures(vectorSource.readFeatures(data));
....
I have tried adapting this following the example at http://openlayers.org/en/v3.6.0/examples/vector-wfs.html and OL 3.6 with the code below:
var urlgeoserver = 'http://geoserver2.nls.uk/geoserver/wfs?service=WFS' +
'&version=1.1.0&request=GetFeature&typename=' + TypeName +
'&outputFormat=text/javascript&format_options=callback:loadFeatures' +
'&srsname=EPSG:3857&cql_filter=INTERSECTS(the_geom,POINT('
+ point27700[0] + ' ' + point27700[1] + '))';
}
vectorSource = new ol.source.Vector({
loader: function(extent, resolution, projection) {
var url = urlgeoserver
// use jsonp: false to prevent jQuery from adding the "callback"
// parameter to the URL
$.ajax({url: url, dataType: 'jsonp'});
},
strategy: ol.loadingstrategy.tile(ol.tilegrid.createXYZ({
maxZoom: 19
}))
});
window.loadFeatures(response) {
vectorSource.addFeatures(geojsonFormat.readFeatures(response));
};
However I try things, it fails to retrieve features from GeoServer into vectorSource and I would appreciate any pointers or suggestions.
Many thanks,

Answer 1

Just in case helpful for others, following further investigation, I realised I just needed to add a 'jsonp: false' to the $.ajax query for it to work. The correct vectorSource syntax is therefore:
var geojsonFormat = new ol.format.GeoJSON();
var vectorSource = new ol.source.Vector({
loader: function(extent, resolution, projection) {
var url = urlgeoserver
$.ajax({url: url, dataType: 'jsonp', jsonp: false})
},
strategy: ol.loadingstrategy.tile(ol.tilegrid.createXYZ({
maxZoom: 19
}))
});
window.loadFeatures = function(response) {
vectorSource.addFeatures(geojsonFormat.readFeatures(response));
};
This is implemented at: http://maps.nls.uk/geo/find/