Why database variables do not show up from AJAX response

[Izzmo]

I could not find ANYTHING on the internet regarding this, and it's starting to really annoy me.

It does not work any any browser.

What happens is this: I have an XMLHttp object setup, it requests a PHP page, the PHP works through everything and then populates an HTML table with database row values.

It returns the table without the database row values.

What the hell?

Any help would be appreciated.

// XMLHttp Ajax Object
  var xmlhttp;
  function loadXMLDoc(url)
  {
   xmlhttp = null;
   var returntxt = "";
   if (window.XMLHttpRequest)
    xmlhttp = new XMLHttpRequest();
   else if (window.ActiveXObject)
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
   if (xmlhttp != null)
   {
    xmlhttp.onreadystatechange = function()
    {
     if (xmlhttp.readyState == 4)
     {
      if (xmlhttp.status == 200)
      {
       alert(xmlhttp.responseText);
       returntxt = json_parse(xmlhttp.responseText);
      }
      else
       alert("Problem retrieving XML data");
     }
    };
    xmlhttp.open("GET", url, false);
    xmlhttp.send(null);
    return returntxt;
   }
   else
    alert("Your browser does not support XMLHTTP.");
  }

PHP Code:

       $db = new DB;
       $results = $db->getVehicleMeasures($_GET["year"], $_GET["make"], $_GET["model"], $_GET["trim"]);
       $row = mysql_fetch_row($results);
       echo json_encode("<p>Total Square Feet: ".(String)$row[0]."</p>
        <table style=\"width: 100%;\">
         <tr>
          <td><div style=\"background-color: #000000; line-height: 2px;\">&nbsp;</div></td>
          <td style=\"font-weight: bold;text-size: 14pt; width: 20px;\">OR</td>
          <td><div style=\"background-color: #000000; line-height: 2px;\">&nbsp;</div></td>
         </tr>
        </table>
        <p>Individual Square Feet per Section:
        <table style=\"width: 100%;\">
         <tr>
          <td>Front Bumper: ".(String)$row[1]."</td>
          <td>Rear Bumper: ".(String)$row[2]."</td>
         </tr>
         <tr>
          <td>Hood: ".(String)$row[3]."</td>
          <td>Roof: ".(String)$row[4]."</td>
         </tr>
         <tr>
          <td>Rear Side: ".(String)$row[5]."</td>
          <td>Front Side: ".(String)$row[6]."</td>
         </tr>
         <tr>
          <td>Sides: ".(String)$row[7]."</td>
          <td>Mirrors: ".(String)$row[10]."</td>
         </tr>
         <tr>
          <td>Back Window: ".(String)$row[8]."</td>
          <td>Side Windows: ".(String)$row[9]."</td>
         </tr>
        </table></p>");
       $db = null; 


[Hades]

Supposing that the table is being built correctly in the php side, I don't see why you wouldn't be able to return it on a request.

Maybe the json encode? You usually encode objects or arrays but json encoding a string is not necessary. Try returning the string as PHP gives it and read it from JS. If that doesn't work, I suggest you double check if the table is being built on the php webservice.

[Izzmo]

Yeah, i actually eliminated the JSON after a further look, but the variables still do not show.

[Hades]

it might be a stupid question, but, do they show when you run the webservice from the browser address bar?

if so, what content do they have? plain text?

[Izzmo]

Yes, it shows up.

They are type double.

So, decimals.

[Hades]

Hi,

I just tested your code (except the PHP side since I don't have your DB) and it seemed to work for me by changing 1 line change in the JS:

My hard coded php was:

output.php

PHP Code:

<?
echo json_encode("<p>Total Square Feet: 123</p>
        <table style=\"width: 100%;\">
         <tr>
          <td><div style=\"background-color: #000000; line-height: 2px;\">&nbsp;</div></td>
          <td style=\"font-weight: bold;text-size: 14pt; width: 20px;\">OR</td>
          <td><div style=\"background-color: #000000; line-height: 2px;\">&nbsp;</div></td>
         </tr>
        </table>
        <p>Individual Square Feet per Section:
        <table style=\"width: 100%;\">
         <tr>
          <td>Front Bumper: 0.25</td>
          <td>Rear Bumper: 0.86</td>
         </tr>
         <tr>
          <td>Hood: 0.25</td>
          <td>Roof: 0.25</td>
         </tr>
         <tr>
          <td>Rear Side: 5.26785</td>
          <td>Front Side: 77.678625</td>
         </tr>
         <tr>
          <td>Sides: 8.825</td>
          <td>Mirrors: 0.2445</td>
         </tr>
         <tr>
          <td>Back Window: 0.21241245</td>
          <td>Side Windows: 0.4645725</td>
         </tr>
        </table></p>");
?>

request.php

<html>
<head>
<script>

var xmlhttp;
  function loadXMLDoc(url)
  {
   xmlhttp = null;
   var returntxt = "";
   if (window.XMLHttpRequest)
    xmlhttp = new XMLHttpRequest();
   else if (window.ActiveXObject)
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
   if (xmlhttp != null)
   {
   	
    xmlhttp.onreadystatechange = function()
    {
     if (xmlhttp.readyState == 4)
     {
      if (xmlhttp.status == 200)
      {
       alert(xmlhttp.responseText);
       returntxt = json_parse(xmlhttp.responseText);
      }
      else
       alert("Problem retrieving XML data");
     }else{
     	
     }
    };
    xmlhttp.open("GET", url, true);
    xmlhttp.send(null);
    return returntxt;
   }
   else
    alert("Your browser does not support XMLHTTP.");
    
  }

function request(){
	loadXMLDoc("output.php");
	
}
</script>
</head>
<body>
<input type="button" value="REQUEST!" onclick="request();">
</body>
</html>

The only change I made on your script was the 3rd argument on the xmlhttp.open function

xmlhttp.open("GET", url, false);

changed to:

xmlhttp.open("GET", url, true);

It displays the content of output.php page with the numbers and decimals correctly. Maybe your issue was the JS?

[Izzmo]

Interesting, I tried using with synchronous because other things weren't working.

But I did change a lot since then, so I will try reverting it back to async and see what happens.

Thanks for the idea.

[Izzmo]

Alright, well I got it to finally work.

I just didn't fully understand the onreadystatechange function very well. But I get it now and it seems to be working just fine, with async as well.

Thanks for the help Hades.

[Hades]

Glad it worked.
I'd suggest you try with a javascript framework to see if the async mode works too, maybe one those got it right.

[Izzmo]

Ah, JavaScript frameworks a little too bloated for me