Generic Handler Data to Ajax Json

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...

Last updated:12/1/2014 7:14:09 AM

1 Answers

Anonymous User
Anonymous User

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