Generic Handler Data to Ajax Json - asp.net

Question

I have a Handler which has some data inside as shown below:
{"city1": { "name": "Adana","slug": "north-east", "url": "#", "path": "M 156.53125,407.40625 L 156.71875,408.5625 L 157.1875,407.8125 L 156.53125,407.40625 z"}}
P.S: The path is coming from SVG image. it draws a city border and there are many cities.
I try to get the data from this handler to variable to use it later...
CODE:
<script type="text/javascript">
var paths;
$.ajax({
url: '/paths.ashx',
dataType: 'json',
contentType: 'application/json',
responseType: "json",
success: function (data) {
paths = data;
alert(paths);
},
error: function (data, status, jqXHR) {
alert(status);
}
});
jQuery(function ($) {
var c = Raphael('map', "100%", "100%");
c.safari();
var label = c.popup(0, 0, "").hide();
attr = { fill: '#898989', stroke: '#FFFFFF', 'stroke-width': 2, 'stroke-linejoin': 'round' }
arr = new Array();
for (var item in paths) {
var p = c.path(paths[item].path);
arr[p.id] = item;
p.attr(attr);
p.hover(function () {
this.animate({
fill: '#8fbf27'
}, 200);
bbox = this.getBBox();
label.attr({ text: paths[arr[this.id]].name }).update(bbox.x, bbox.y + bbox.height / 2, bbox.width).toFront().show();
}, function () {
this.animate({
fill: attr.fill
}, 200);
label.hide();
})
.click(function () {
location.href = paths[arr[this.id]].url;
})
}
});
</script>
The problem comes right here...paths or data is undefined, it's always empty. But paths.ashx is not empty at all...
I couldnt find the solution...could you take a look pls...

Answer 1

Put your jQuery .ajax() function inside of the jQuery DOM ready function and the drawing logic inside the success handler of the AJAX call, like this:
<script type="text/javascript">
var paths;
jQuery(function ($) {
$.ajax({
url: '/paths.ashx',
dataType: 'json',
contentType: 'application/json',
responseType: "json",
success: function (data) {
paths = data;
alert(paths);
var c = Raphael('map', "100%", "100%");
c.safari();
var label = c.popup(0, 0, "").hide();
attr = { fill: '#898989', stroke: '#FFFFFF', 'stroke-width': 2, 'stroke-linejoin': 'round' }
arr = new Array();
for (var item in paths) {
var p = c.path(paths[item].path);
arr[p.id] = item;
p.attr(attr);
p.hover(function () {
this.animate({
fill: '#8fbf27'
}, 200);
bbox = this.getBBox();
label.attr({ text: paths[arr[this.id]].name }).update(bbox.x, bbox.y + bbox.height / 2, bbox.width).toFront().show();
}, function () {
this.animate({
fill: attr.fill
}, 200);
label.hide();
})
.click(function () {
location.href = paths[arr[this.id]].url;
})
}
},
error: function (data, status, jqXHR) {
alert(status);
}
});
});

Answer 2

You're trying to draw before the ajax promise is full filled, try this
function drawMap (paths) {
var c = Raphael('map', "100%", "100%");
c.safari();
var label = c.popup(0, 0, "").hide();
attr = { fill: '#898989', stroke: '#FFFFFF', 'stroke-width': 2, 'stroke-linejoin': 'round' }
arr = new Array();
for (var item in paths) {
var p = c.path(paths[item].path);
arr[p.id] = item;
p.attr(attr);
p.hover(function () {
this.animate({
fill: '#8fbf27'
}, 200);
bbox = this.getBBox();
label.attr({ text: paths[arr[this.id]].name }).update(bbox.x, bbox.y + bbox.height / 2, bbox.width).toFront().show();
}, function () {
this.animate({
fill: attr.fill
}, 200);
label.hide();
})
.click(function () {
location.href = paths[arr[this.id]].url;
})
}
}
and from your ajax request
$.ajax({
url: '/paths.ashx',
dataType: 'json',
contentType: 'application/json',
responseType: "json",
success: function (data) {
paths = data;
drawMap(paths); //notice this
},
error: function (data, status, jqXHR) {
alert(status);
}
});