Home > DeveloperSection > Forums > Generic Handler Data to Ajax Json
Ankit Singh

Total Post:341

Points:2389
Posted on    November-30-2014 10:09 PM

 ASP.Net C#  AJAX  JSON  Generics  Handler 
Ratings:


 1 Reply(s)
 676  View(s)
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...



Kamlakar Singh
Kamlakar Singh

Total Post:194

Points:1396
Posted on    December-01-2014 7:14 AM

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

        }

    });

});


Don't want to miss updates? Please click the below button!

Follow MindStick