Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

In my PHP file, I create an array of arrays, and use json_encode to make this array usable in javascript. When I echo this direction within the tags it works perfectly. However, I need the PHP to be run at regular intervals (I'm using setTimeout), so I'm trying to use AJAX to call the php and get that array to be used in the javascript function.

Here is the PHP:

$bubbles = array();
$result = mysql_query("SELECT text, lat, lng FROM bubbles");
while($row = mysql_fetch_array($result)){
$newbubble = array($row[0],$row[1],$row[2],'female-2.png');
$bubbles[] = $newbubble;
}
$js_array =  json_encode($bubbles);
echo"$js_array";

And here is the javascript/AJAX portion in question:

setTimeout(initializeMaps, 5000);

function initializeMaps() {
var markers;
var ajax;
ajax=new XMLHttpRequest();
ajax.onreadystatechange=function()
  {
  if (ajax.readyState==4 && ajax.status==200)
    {
var markers = ajax.responseText;
    }
  }
ajax.open("GET","ajax-getbubbles.php",true);
ajax.send();


/*The markers variable needs to be used in the following code*/
var iconBase = 'http://picaflora.com/uniproject/images/';
var infowindow = new google.maps.InfoWindow(), marker, i;
for (i = 0; i < markers.length; i++) {  
    marker = new google.maps.Marker({
        position: new google.maps.LatLng(markers[i][1], markers[i][2]),
        map: map,
        icon: iconBase + markers[i][3]
    });
    google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
            infowindow.setContent(markers[i][0]);
            infowindow.open(map, marker);
        }
    })(marker, i));
}
setTimeout(initializeMaps, 5000);
}

If I alert() or console.log(), all the data is coming back from PHP just fine. But somehow it seems that the rest of the script just isn't doing anything with the variable markers. I'm not too familiar with javascript, just familiar enough to tinker and try things till it works, so if you think there might be a better way to approach the problem, then by all means go for it. I'd rather not look into jQuery solutions at this point, unless it's necessary. Thanks!

share|improve this question
    
possible duplicate of How to return the response from an AJAX call? –  Musa Jul 4 '13 at 21:28

2 Answers 2

up vote 0 down vote accepted

You have to decode the encoded JSON string at the javascript's end before you can use it as a variable.

Instead of

var markers = ajax.responseText;

use

var markers = JSON.parse(markers);

Try this-

setTimeout(initializeMaps, 5000);

function initializeMaps() {
    var markers;
    var ajax;
    ajax=new XMLHttpRequest();
    ajax.onreadystatechange=function(){
        if (ajax.readyState==4 && ajax.status==200){
            var markers = JSON.parse(ajax.responseText);
            update(markers);
        }
    }
    ajax.open("GET","ajax-getbubbles.php",true); 
    ajax.send();
}

function update(markers){
    var iconBase = 'http://picaflora.com/uniproject/images/';
    var infowindow = new google.maps.InfoWindow(), marker, i;
    for (i = 0; i < markers.length; i++) {  
        marker = new google.maps.Marker({
            position: new google.maps.LatLng(markers[i][1], markers[i][2]),
            map: map,
            icon: iconBase + markers[i][3]
        });
    google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
        infowindow.setContent(markers[i][0]);
        infowindow.open(map, marker);
    }
    })(marker, i));
   }    
}

PS- I'm not sure why are calling setTimeout(initializeMaps, 5000); twice.

share|improve this answer

Javascript is asynchronous unlike PHP. All of that javascript code where you do things with the markers is being executed immediately before you have received a response. What you need to do is wrap it in a function:

function myFunc(markers) {
     // all of your code to do stuff
}

Then call that function when the response state changes:

ajax.onreadystatechange=function()
{
  if (ajax.readyState==4 && ajax.status==200)
  {
      var markers = ajax.responseText;
      myFunc(markers);
  }
}
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.