javascript - Populating an array from an AJAX call and returning it to calling function -


i using gmap3 extension google maps api , jquery.

i have .gpx file read via ajax , each coordinate , add array. return array populate polyline in map.

in function test count of points before return , count 0.

here function processes .gpx file return coordinates:

function test() {       var points = [];       $.ajax({           type: "get",           url: "gpx/12345.gpx",           datatype: "xml",           success: function (xml) {                $(xml).find("trkpt").each(function () {                     var lat = $(this).attr("lat");                     var lon = $(this).attr("lon");                     var p = new google.maps.latlng(lat, lon);                     points.push(p);                });           }      });       return points; }  $(document).ready(function () {      var points = test();      var route1latlng = new google.maps.latlng(-33.7610590, 18.9616790);      $('#map_canvas').gmap3({           map: {                options: {                     center: route1latlng,                     zoom: 11                }           },           polyline: {                options: {                     path: points,                     strokecolor: '#ff00aa',                     strokeopacity: .7,                     strokeweight: 4                }           }      }); }); 

in ie9 polyline not drawn, in firefox draws properly.

what happening call test return points, async request not hault execution of program , return empty array of points. using empty array plot line not displayig. display once ajax request completed. wrapper plotting of marker function , call when ajax call has been completed.

try calling function in success event of ajax this

function test() {   var points = [];   $.ajax({       type: "get",       url: "gpx/12345.gpx",       datatype: "xml",       success: function (xml) {            $(xml).find("trkpt").each(function () {                 var lat = $(this).attr("lat");                 var lon = $(this).attr("lon");                 var p = new google.maps.latlng(lat, lon);                 points.push(p);            });            drawpolyline(points); //when points have been loaded call method       }  }); }  function drawpolyline(pointstobedrawn){ // method gets points , plots var route1latlng = new google.maps.latlng(-33.7610590, 18.9616790);      $('#map_canvas').gmap3({           map: {                options: {                     center: route1latlng,                     zoom: 11                }           },           polyline: {                options: {                     path: pointstobedrawn,                     strokecolor: '#ff00aa',                     strokeopacity: .7,                     strokeweight: 4                }           }      }); }  $(document).ready(function () {      test();  // need method plot markers on success event of    }); 

of use ajax false as

$.ajax({       async: false, //dont use quotes here "false".       type: "get",       url: "gpx/12345.gpx",       datatype: "xml",       success: function (xml) {            $(xml).find("trkpt").each(function () {                 var lat = $(this).attr("lat");                 var lon = $(this).attr("lon");                 var p = new google.maps.latlng(lat, lon);                 points.push(p);            });            drawpolyline(points);       }  }); 

if set async false our program wait ajax req complete process.

read how ajax call works , threading more clarification


Comments

Popular posts from this blog

monitor web browser programmatically in Android? -

Shrink a YouTube video to responsive width -

wpf - PdfWriter.GetInstance throws System.NullReferenceException -