Create Javascript variable from AJAX

Question

I'm practically a beginner when it comes to AJAX so I need some help..

I have on my index/home page a bit of javascript that send some XML to a third party script;

<script type="text/javascript">
   var myChart = new FusionCharts("/FusionCharts/Radar.swf","myChartId", "784", "500", "0");
   myChart.setXMLData("<?php echo $radar_data_string; ?>");
   myChart.render("chartContainer"); 
</script>

The variable $radar_data_string is a php string that I am building in the AJAX page. On the same index/home page I have the obligatory call to AJAX request, as follows;

<!-- Javascript Call to AJAX file -->
<script>
 function showFeedback(str) {
   if (str=="") {
     document.getElementById("txtHint").innerHTML="";
     return;
   } 
  if (window.XMLHttpRequest) {
    // code for IE7+, Firefox, Chrome, Opera, Safari
     xmlhttp=new XMLHttpRequest();
   } else { // code for IE6, IE5
     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
   }
   xmlhttp.onreadystatechange=function() {
     if (xmlhttp.readyState==4 && xmlhttp.status==200) {
       document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
     }
   }
   xmlhttp.open("GET","viewFeedback/getFeedback.php?surveyid="+str,true);
   xmlhttp.send();
 }
 </script>
 <!-- End Javascript Call to AJAX file -->

The code above will pass the surveyid variable to the getFeedback.php script and THAT is where $radar_data_string is created.

The AJAX request is made when the user selects one of the following options;

<select id="survey" name="survey" onChange="showFeedback(this.value);">               
  <option value=''>- -</option>
  <option value='13182|customer1@hotmail.com'>Survey Title 1</option>
  <option value='13183|customer1@hotmail.com'>Survey Title 2</option>
</select>

The problem is that... No data is loading. I'm pretty sure that the $radar_data_string string I am creating is correct because when I get ahold of the string and put it directly in to the myChart.setXMLData it works fine.

So am I misunderstanding how AJAX works (probably) or am I on the right track?

PS - If you are going to help, you should know that I can't really use jQuery. Sorry!

Answer 1

You seem to have misunderstood the way an AJAX request works (at least from what I've understood of the code you've given). The point of an AJAX request is to request new data from the server without having to reload the rest of the page.

From what I can see you're treating the AJAX request like some sort of generic connection that refreshes all the data in your page... that's not how it works.

Problem...

This is the callback function once your AJAX request has been successful, you should be using the response given here to manipulate your page...

xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
       document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
     }

You seem to be trying to directly echo the PHP variable into your document, this wont work as PHP is interpreted before the page loads...

myChart.setXMLData("<?php echo $radar_data_string; ?>");

Solution...

Instead try implementing your function into the AJAX callback like so, now the you can access the returned response of the server...

xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
       myChart.setXMLData(xmlhttp.responseText); //This being the server response...
    }