Generic Handler Data to Ajax Json

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

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);
    }
});

Answer 2

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);
        }
    });
});