I have been using the example shown here (https://astuntechnology.github.io/osgis-ol3-leaflet/ol3/05-WMS-INFO.html) to try and retrieve features at a coordinate from multiple TileWMS layers I have set up in my application.
This example has been tweaked so it now returns data in JSONP using the reqwest library, but now I am trying to figure out the best way to adapt this to include multiple layers and multiple features.
I am thinking of using the map.forEachLayerAtPixel function to retrieve all layers present at the map click location, and then within if statements call the feature and add this to a variable to build a dynamic html table of results.
I don't know if this is the best approach but is the only way I can think of doing it so I am able to retrieve the information in a way I can lay it out specifically.
Below is the javascript for my on map click function but it is not returning the pop up and doesn't display any errors.
I am not sure if I am using the correct approach, and does anything look incorrect with the below?
Thanks
var popup = new ol.Overlay.Popup();
map.addOverlay(popup);
map.on('singleclick', function(evt) {
if($(window).width() <= 767 && document.getElementById('sidebar').style.display == 'block') {
$('#sidebar').toggle();
$(".navbar-collapse.in").collapse("hide");
map.updateSize();
return false;
}
// Hide existing popup and reset it's offset
popup.hide();
popup.setOffset([0, 0]);
var displayedLayers = [];
var content = "";
map.forEachLayerAtPixel(evt.pixel, function(layer) {
displayedLayers.push(layer.get('name'));
});
if ($.inArray('layer62', displayedLayers) > -1) {
var url = layer62
.getSource()
.getGetFeatureInfoUrl(
evt.coordinate,
map.getView().getResolution(),
map.getView().getProjection(),
{
'INFO_FORMAT': 'text/javascript',
'format_options': 'callback:results',
'propertyName': 'definition'
}
);
reqwest({
url: url,
type: 'jsonp',
jsonpCallbackName: 'results'
}).then(function (data) {
var feature = data.features[0];
var props = feature.properties;
content += "<h4>Flood Zone 3</h4><p>" + props.definition + "</p>";
});
}
if ($.inArray('layer63', displayedLayers) > -1) {
var url = layer63
.getSource()
.getGetFeatureInfoUrl(
evt.coordinate,
map.getView().getResolution(),
map.getView().getProjection(),
{
'INFO_FORMAT': 'text/javascript',
'format_options': 'callback:results',
'propertyName': 'definition'
}
);
reqwest({
url: url,
type: 'jsonp',
jsonpCallbackName: 'results'
}).then(function (data) {
var feature = data.features[0];
var props = feature.properties;
content += "<h4>Flood Zone 2</h4><p>" + props.definition + "</p>";
});
}
return content;
popup.show(evt.coordinate, content);
});
EDITED original answer as it wasn't correct, this one seems to work. It's jus a test based in your code but changes the way the popup is handled:
var layers = [
new ol.layer.Tile({
source: new ol.source.TileWMS({
url: 'http://demo.opengeo.org/geoserver/wms?',
params: {
'LAYERS': 'ne:ne',
'TILED': true,
'version': '1.1.0'
},
serverType: 'geoserver',
})
}),
new ol.layer.Tile({
source: new ol.source.TileWMS({
url: 'http://demo.opengeo.org/geoserver/wms?',
params: {
'LAYERS': 'ne:ne',
'TILED': true,
'version': '1.1.0'
},
serverType: 'geoserver',
})
})
];
var container = document.getElementById('popup');
var content = document.getElementById('popup-content');
var popup = new ol.Overlay( /** #type {olx.OverlayOptions} */ ({
element: container,
autoPan: true,
autoPanAnimation: {
duration: 250
}
}));
var map = new ol.Map({
layers: layers,
target: 'map',
overlays: [popup],
view: new ol.View({
center: [327641, 4149464],
zoom: 3,
//EPSG: 25830
})
});
map.on('singleclick', function (evt) {
content.innerHTML = "";
var displayedLayers = [];
var responses = 0;
var url = layers[0].getSource()
.getGetFeatureInfoUrl(
evt.coordinate,
map.getView().getResolution(),
map.getView().getProjection(), {
'INFO_FORMAT': 'text/javascript',
'format_options': 'callback:parseResponse',
'propertyName': 'name'
});
reqwest({
url: url,
type: 'jsonp',
jsonpCallbackName: 'parseResponse'
}).then(function (data) {
var feature = data.features[0];
var props = feature.properties;
content.innerHTML += "<h4>First Layer</h4><p>" + props.name + "</p>";
popup.setPosition(evt.coordinate);
});
// Second layer
var url = layers[1].getSource()
.getGetFeatureInfoUrl(
evt.coordinate,
map.getView().getResolution(),
map.getView().getProjection(), {
'INFO_FORMAT': 'text/javascript',
'format_options': 'callback:parseResponse',
'propertyName': 'name'
});
reqwest({
url: url,
type: 'jsonp',
jsonpCallbackName: 'parseResponse'
}).then(function (data) {
var feature = data.features[0];
var props = feature.properties;
content.innerHTML += "<h4>Second layer</h4><p>" + props.name + "</p>";
popup.setPosition(evt.coordinate);
});
});
Jsfiddle here: http://jsfiddle.net/fbma/1pchmpoo
for anyone struggling with openlayers 3+ getGetFeatureInfoUrl function with multiple layers, the solution for me was passing the parameters LAYERS, QUERY_LAYERS and FEATURE_COUNT. Specially the last one as even including all layers in the two former ones, geoserver indeed takes all the layers BUT assumes tha FEATURE_COUNT is 1
So the nex example did the work
var url = layers[0].getSource()
.getGetFeatureInfoUrl(
evt.coordinate,
map.getView().getResolution(),
map.getView().getProjection(), {
**'LAYERS':'ne:ne,ne:ne2,ne:ne3,ne:ne4,ne:ne5',
'QUERY_LAYERS': 'ne:ne,ne:ne2,ne:ne3,ne:ne4,ne:ne5',
'FEATURE_COUNT':100000**,
'INFO_FORMAT': 'text/javascript',
'format_options': 'callback:parseResponse',
'propertyName': 'name'
});
Related
This is a proper noob question it would seem, so apologies, but I can't seem to solve it so I'm reaching out for some assistance.
I have a function in my .js file that interacts with the Google Places library to autocomplete a field in a form. I then have an ajax function that runs when you click the submit button which creates variables in the django session. The data of interest to me is lat and long.
However, for some reason, I can't seem to get the data to pass from one to the other. I know the ajax function is working because if I type in fixed values they propagate through to django, but I can't seem to get it to update dynamically.
const csrf = document.getElementsByName('csrfmiddlewaretoken');
var lat;
var lng;
function autocomplete_location() {
let defaultBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(49.6331, -11.7247),
new google.maps.LatLng(59.4850, 1.5906));
let input = document.getElementById('id_your_location');
let options = {
bounds: defaultBounds,
types: ["address"],
fields: ["name", "geometry"],
};
let autocomplete = new google.maps.places.Autocomplete(input, options);
autocomplete.addListener('place_changed', function() {
// Get place info
let place = autocomplete.getPlace();
// Do whatever with the value!
lat = place.geometry.location.lat()
lng = place.geometry.location.lng()
console.log(lat)
console.log(lng)
})
}
$(document).ready(function (){
$(".btn").click(function (){
$.ajax({
url: '',
type: 'POST',
data: {
'csrfmiddlewaretoken': csrf[0].value,
'lat': lat,
'long': lng,
},
success: function (response) {
console.log(response)
window.location.replace('/new_path/')
},
error: function (error) {
console.log(error)
}
})
})
})
UPDATE -----------------------------------------------------------
I have managed to get this working. I have moved the ajax call into the autocomplete function, but it only works when I click the submit button, it does not work when I press the enter key, so I need to brush up on my JS and ajax to solve that problem.
const csrf = document.getElementsByName('csrfmiddlewaretoken');
function autocomplete_location() {
let defaultBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(49.6331, -11.7247),
new google.maps.LatLng(59.4850, 1.5906));
let input = document.getElementById('id_your_location');
let options = {
bounds: defaultBounds,
types: ["address"],
fields: ["name", "geometry"],
};
let autocomplete = new google.maps.places.Autocomplete(input, options);
autocomplete.addListener('place_changed', function() {
// Get place info
let place = autocomplete.getPlace();
// Do whatever with the value!
var lat = place.geometry.location.lat();
var lng = place.geometry.location.lng();
console.log(lat)
console.log(lng)
$("form").submit(function (){
$.ajax({
url: '',
type: 'POST',
data: {
'csrfmiddlewaretoken': csrf[0].value,
'lat': lat,
'long': lng,
},
success: function (response) {
console.log(response)
// this is not good. But I couldn't find a better way to redirect
// window.location.replace('/coach/')
},
error: function (error) {
console.log(error)
}
})
})
})
}
where do you call autocomplete_location() ? try passing lat and long in that function as parameters e.g. autocomplete_location(lat, long)
I'm able to extract data from geojson file (produced from GeoServer WFS layer type) and display it on browser using OpenLayer. But I'm facing problem when I only want to display the data with certain features aka filtering.
My JSON filename -> gpr.geojson
GeoServer layername -> visualization:GPR
Attribute filter -> branchCode = N01821 and routeCode = 0650
I followed filtering tutorial from https://www.giserdqy.com/wp-content/guids/ol-v4.6.5/examples/vector-wfs-getfeature.html and I also have tried using CQL_FILTER but no luck at all
Below is my code and the filtering doesn't work
var mymap = new ol.Map({
target: 'mapid',
layers: [
new ol.layer.Tile({
source: new ol.source.XYZ({
//Vworld Tile 변경
url: 'http://xdworld.vworld.kr:8080/2d/Base/201802/{z}/{x}/{y}.png'
})
})
],
view: new ol.View({
center: ol.proj.transform([128.1591, 36.4109], 'EPSG:4326', 'EPSG:3857'),
zoom: 8,
minZoom: 6,
maxZoom: 19
}),
logo:false
});
var vectorSource = new ol.source.Vector({
url: './data/GPR.geojson,
format: new ol.format.GeoJSON()
})
var layer = new ol.layer.VectorImage({
source: vectorSource,
visible: true,
})
// generate a GetFeature request
var featureRequest = new ol.format.WFS().writeGetFeature({
srsName: 'EPSG:3857',
featureNS: 'visualization',
featurePrefix: 'osm',
featureTypes: ['GPR'],
outputFormat: 'application/json',
filter: ol.format.filter.and(
ol.format.filter.like('branchCode', 'N01821'),
ol.format.filter.equalTo('routeCode', '0650')
)
});
// then post the request and add the received features to a layer
fetch('http://localhost:8080/geoserver/visualization/wfs', {
method: 'POST',
body: new XMLSerializer().serializeToString(featureRequest)
}).then(function (response) {
return response.json();
}).then(function (json) {
var features = new ol.format.GeoJSON().readFeatures(json);
vectorSource.addFeatures(features);
mymap.getView().fit(vectorSource.getExtent());
});
Using Leaflet, WMS and CQL Filter is very simple as below. How to do it using OpenLayer and WFS?
var wmsLayer= L.tileLayer.wms("http://localhost:8080/geoserver/visualization/wms", {
layers: 'visualization:GPR',
format: 'image/png',
transparent: true,
CQL_FILTER: "branchCode='N01821'"
You can still use a request and CQL_FILTER in OL just like your leaflet example, something like this,
$.ajax({
method: 'POST',
url: 'http://localhost:8080/geoserver/visualization/wfs',
data: {
"service": "WFS",
"request": "GetFeature",
"typename": "visualization:GPR",
"outputFormat": "application/json",
"srsname": "EPSG:3857",
"maxFeatures": 50,
"CQL_FILTER": "branchCode='N01821'"
},
success: function (response) {
var features = new ol.format.GeoJSON().readFeatures(response);
vectorSource.addFeatures(features);
mymap.getView().fit(vectorSource.getExtent());
},
fail: function (jqXHR, textStatus) {
console.log("Request failed: " + textStatus);
}
});
If you prefer to use fetch, I think this should work,
let featureRequest = {
"service": "WFS",
"request": "GetFeature",
"typename": "visualization:GPR",
"outputFormat": "application/json",
"srsname": "EPSG:3857",
"maxFeatures": 50,
"CQL_FILTER": "branchCode='N01821'"
};
fetch('http://localhost:8080/geoserver/visualization/wfs', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(featureRequest)
}).then(function (json) {
var features = new ol.format.GeoJSON().readFeatures(reponse);
vectorSource.addFeatures(features);
mymap.getView().fit(vectorSource.getExtent());
});
I have a code which I request data from a geoserver and display geoJSON on a map. To this request I'm using three AJAX calls like the following:
$(document).ready(function(){
//BASEMAP
var center = new L.LatLng(-0.8936,119.8638);
var map = new L.Map('map', { center: center, zoom: 14, attributionControl:true, zoomControl:false});
osmTile = "http://tile.openstreetmap.org/{z}/{x}/{y}.png";
osmCopyright = "Map data © 2016 OpenStreetMap contributors";
osmLayer = new L.TileLayer(osmTile, { maxZoom: 18, attribution: osmCopyright } );
map.addLayer(osmLayer);
//URL SERVICE
var owsrootUrl = 'http://sample.com/geoserver/ows';
//different color in layers
function getColor(d) {
return d > 10000 ? '#FF0000' :
d > 5000 ? '#FF9900' :
d > 2000 ? '#E31A1C' :
d > 1000 ? '#00FF00' :
d > 500 ? '#FD8D3C' :
d > 200 ? '#0000CC' :
d > 100 ? '#FED976' :
'#FFEDA0';
}
function style(feature) {
return {
weight: 1,
opacity: 3,
color: 'white',
dashArray: '3',
fillOpacity: 3,
fillColor: getColor(feature.properties.luas_tanah)
};
}
var lyr_1 = new L.LayerGroup();
var lyr_2 = new L.LayerGroup();
var lyr_3 = new L.LayerGroup();
var lyr_4 = new L.LayerGroup();
var defaultParameters = {
service : 'WFS',
version : '1.0.0',
request : 'GetFeature',
typeName : 'pbb:view_map',
maxFeatures: 1000,
outputFormat : 'text/javascript',
format_options : 'callback:getJson',
SrsName : 'EPSG:4326'
};
var parameters = L.Util.extend(defaultParameters);
var URL = owsrootUrl + L.Util.getParamString(parameters);
var lyr_1 = new L.LayerGroup();
var ajax1 = $.ajax({
type: 'GET',
url : URL,
dataType : 'jsonp',
async: false,
jsonpCallback : 'getJson',
success : function (response) {
console.log("Layer 1");
L.geoJson(response, {
style: function (feature) {
return {
stroke: true,
color: getColor(feature.properties.luas_tanah),
opacity: 1,
weight: 1
};
},
onEachFeature: function (feature, layer) {
popupOptions = {maxWidth: 200};
layer.bindPopup("<b>D NOP : </b> " + feature.properties.d_nop
,popupOptions);
}
}).addTo(lyr_1);
},
error: function (xhr, status) {
alert("Failed call Layer A");
}
});
var defaultParameters1 = {
service : 'WFS',
version : '1.0.0',
request : 'GetFeature',
typeName : 'pbb:view_map',
maxFeatures: 1000,
outputFormat : 'text/javascript',
format_options : 'callback:getJson',
SrsName : 'EPSG:4326'
};
var parameters1 = L.Util.extend(defaultParameters1);
var URL1 = owsrootUrl + L.Util.getParamString(parameters1);
var lyr_2 = new L.LayerGroup();
var ajax2 = $.ajax({
type: 'GET',
url : URL1,
dataType : 'jsonp',
async: false,
jsonpCallback : 'getJson',
success : function (response) {
console.log("Layer 2");
L.geoJson(response, {
style: function (feature) {
return {
stroke: true,
color: getColor(feature.properties.luas_tanah),
opacity: 0.8,
weight: 1
};
},
onEachFeature: function (feature, layer) {
popupOptions = {maxWidth: 200};
layer.bindPopup("<b>D NOP : </b> " + feature.properties.d_nop
,popupOptions);
}
}).addTo(lyr_2);
},
error: function (xhr, status) {
alert("Failed call Layer B");
}
});
var defaultParameters2 = {
service : 'WFS',
version : '1.0.0',
request : 'GetFeature',
typeName : 'pbb:view_map',
maxFeatures: 1000,
outputFormat : 'text/javascript',
format_options : 'callback:getJson',
SrsName : 'EPSG:4326'
};
var parameters2 = L.Util.extend(defaultParameters2);
var URL2 = owsrootUrl + L.Util.getParamString(parameters2);
var lyr_3 = new L.LayerGroup();
var ajax3 = $.ajax({
type: 'GET',
url : URL2,
dataType : 'jsonp',
async: false,
jsonpCallback : 'getJson',
success : function (response) {
console.log("Layer 3");
L.geoJson(response, {
style: function (feature) {
return {
stroke: true,
color: getColor(feature.properties.luas_tanah),
opacity: 0.8,
weight: 1
};
},
onEachFeature: function (feature, layer) {
popupOptions = {maxWidth: 200};
layer.bindPopup("<b>D NOP : </b> " + feature.properties.d_nop
,popupOptions);
}
}).addTo(lyr_3);
},
error: function (xhr, status) {
alert("Failed call Layer C");
}
});
var defaultParameters3 = {
service : 'WFS',
version : '1.0.0',
request : 'GetFeature',
typeName : 'pbb:view_map',
maxFeatures: 1000,
outputFormat : 'text/javascript',
format_options : 'callback:getJson',
SrsName : 'EPSG:4326'
};
var parameters3 = L.Util.extend(defaultParameters3);
var URL3 = owsrootUrl + L.Util.getParamString(parameters3);
var lyr_4 = new L.LayerGroup();
var ajax4 = $.ajax({
url : URL3,
dataType : 'jsonp',
async: false,
jsonpCallback : 'getJson',
success : function (response) {
console.log("Layer 4");
L.geoJson(response, {
style: function (feature) {
return {
stroke: true,
color: getColor(feature.properties.luas_tanah),
opacity: 0.8,
weight: 1
};
},
onEachFeature: function (feature, layer) {
popupOptions = {maxWidth: 200};
layer.bindPopup("<b>D NOP : </b> " + feature.properties.d_nop
,popupOptions);
}
}).addTo(lyr_4);
},
error: function (xhr, status) {
alert("Failed call Layer D");
}
});
var baseMaps = [
{
groupName : "OSM Base Maps",
layers : {
"OpenStreetMaps" : osmLayer
}
}
];
var overlays = [
{
groupName : "Kecamatan",
expanded : true,
layers : {
"Layer A" : lyr_1,
"Layer B" : lyr_2,
"Layer C" : lyr_3,
"Layer D" : lyr_4
}
}
];
var options = {
container_width : "300px",
group_maxHeight : "800px",
exclusive : true
};
var control = L.Control.styledLayerControl(baseMaps, overlays, options);
map.addControl(control);
var legend = L.control({position: 'bottomright'});
legend.onAdd = function (map) {
var div = L.DomUtil.create('div', 'info legend'),
grades = [0, 100, 200, 500, 1000, 2000, 5000, 10000],
labels = [],
from, to;
for (var i = 0; i < grades.length; i++) {
from = grades[i];
to = grades[i + 1];
labels.push(
'<i style="background:' + getColor(from + 1) + '"></i> ' +
from + (to ? '–' + to : '+'));
}
div.innerHTML = labels.join('<br>');
return div;
};
legend.addTo(map);
});
Now my problem is every time I open the page everything work just fine, but sometimes when I refresh the page everything breaks apart. For example some times "Layer A" data is displayed, some times data ends up on the wrong dataset. When I get this bug I get the following message in the console:
ows?service=WFS&version=1.0.0&request=GetFeature&typeName=pbb%3Aview_map&maxFeatures=1000&outputFor…:1 Uncaught TypeError: getJson is not a function
On my research it seems that this type of error is quite common when running multiple AJAX calls. What I don't understand is why this error does not occur 100% of the time. What type of techniques can be used to fix it? I heard of Deffered Objects but could not apply it on my code, my expertise level on this is far from great. Although this may tend towards a GIS question I believe that this type of issue is more related to ordinary jQuery and Asynchronous calls.
jsonpCallback Type: String or Function() Specify the callback function
name for a JSONP request. This value will be used instead of the
random name automatically generated by jQuery. It is preferable to let
jQuery generate a unique name as it'll make it easier to manage the
requests and provide callbacks and error handling.
Don't use it.
Remove this line:
jsonpCallback : 'getJson',
When you have multiple requests in flight at once, their callback functions (since you are forcing them to use the same name) overwrite each other.
async: false
Making a synchronous request would resolve the problem (since you can't have multiple synchronous requests in flight at once (they queue)) … but they are:
Horrible (they are deprecated in XHR on the main browser thread with good reason)
Completely incompatible with JSONP (so your instruction is ignored).
You should remove the attempt to make the request synchronous too.
I have function to show map on my website. It works well for desktop version, but does not on mobile. It does not affect nor bounds nor zoom level. Map is centered somewhere...
services_vars.search_lat = ''
services_vars.search_lng = ''
parseInt(services_vars.zoom) = 14
if($('#mapView').length > 0) {
var propsAjaxURL = services_vars.admin_url + 'admin-ajax.php';
var propsSecurity = $('#securityAppMap').val();
$.ajax({
type: 'POST',
dataType: 'json',
url: propsAjaxURL,
data: {
'action': 'reales_get_searched_properties',
'country': services_vars.search_country,
'state': services_vars.search_state,
'city': services_vars.search_city,
'category': services_vars.search_category,
'type': services_vars.search_type,
'min_price': services_vars.search_min_price,
'max_price': services_vars.search_max_price,
'bedrooms' : services_vars.search_bedrooms,
'bathrooms' : services_vars.search_bathrooms,
'neighborhood' : services_vars.search_neighborhood,
'min_area' : services_vars.search_min_area,
'max_area' : services_vars.search_max_area,
'amenities': services_vars.search_amenities,
'page': services_vars.page,
'sort': services_vars.sort,
'security': propsSecurity
},
success: function(data) {
appMap = new google.maps.Map(document.getElementById('mapView'), options);
var styledMapType = new google.maps.StyledMapType(styles, {
name : 'Styled'
});
appMap.mapTypes.set('Styled', styledMapType);
appMap.getStreetView().setOptions(panoramaOptions);
var searchedPosition = new google.maps.LatLng(services_vars.search_lat, services_vars.search_lng);
appMap.setCenter(searchedPosition);
appMap.setZoom(parseInt(services_vars.zoom));
if(data.getprops === true) {
addMarkers(data.props, appMap);
appMap.fitBounds(markers.reduce(function(bounds, marker) {
return bounds.extend(marker.getPosition());
}, new google.maps.LatLngBounds()));
google.maps.event.trigger(appMap, 'resize');
}
},
error: function(errorThrown) {
}
});
}
Here is the web method, which I use before for another thing, and it works:
[WebMethod]
public static string GetTests()
{
return GetData().GetXml();
}
public static DataSet GetData()
{
DataSet ds = new DataSet();
BusinessLayer.StudentsController oStudent = new BusinessLayer.StudentsController();
oStudent.Action = "page";
oStudent.PageIndex = 0;
oStudent.PageSize = int.Parse(System.Configuration.ConfigurationManager.AppSettings["PageSize"].ToString());
DataTable dt1 = oStudent.Select();
DataTable dt2 = dt1.Copy();
dt2.TableName = "Students";
ds.Tables.Add(dt2);
DataTable dt = new DataTable("PageCount");
dt.Columns.Add("PageCount");
dt.Rows.Add();
dt.Rows[0][0] = oStudent.PageCount;
ds.Tables.Add(dt);
return ds;
}
JavaScript:
$('#selectDynamic1').select2({
placeholder: "Search for a movie",
minimumInputLength: 1,
multiple: true,
ajax: {
url: "Default.aspx/GetTests",
type: 'POST',
params: {
contentType: 'application/json; charset=utf-8'
},
dataType: 'json',
data: function (term, page) {
return JSON.stringify({ q: term, page_limit: 10 });
},
results: function (data) {
return {results: data};
},
},
formatResult: formatResult,
formatSelection: formatSelection,
/*initSelection: function(element, callback) {
var data = [];
$(element.val().split(",")).each(function(i) {
var item = this.split(':');
data.push({
id: item[0],
title: item[1]
});
});
//$(element).val('');
callback(data);
}*/
});
function formatResult(node) {
alert('');
return '<div>' + node.id + '</div>';
};
function formatSelection(node) {
alert('');
return node.id;
};
Please help, GetTests is not even firing, I want to bring the student through SQL then fill the select2.
First, you shoul ry to change the HTTP verb to GET, as you are not posting data to the server, you want to get data from it:
ajax: {
...
type: 'GET',
...
}
Secondly, you are expecting JSON from the server, but in the GetData method, you are creating an XML document - at least the code conveys this. This may be one cause, why your code does not work.