GENERIC HANDLER DATA TO AJAX JSON

Ankit Singh

Total Post:341

Points:2389
Posted by  Ankit Singh
 1029  View(s)
Ratings:
Rate this:

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

  1. Kamlakar Singh

    Post:194

    Points:1396
    Re: Generic Handler Data to Ajax Json

    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

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!