Cannot get the AJAX call to work

Gary Williams · 03-02-2012, 10:34 AM

Hi All,

I have set up two AJAX demos on my site at http://joomla170.iplappdev.co.uk/

The first demo in the "Flexi Custom Code 1" module works fine. The second demo in the "Flexi Custom Code 2" module is a single file so it has to refresh the whole page to display the calculated values. I want to split the file into two smaller files so that the "Flexi Custom Code 2" deom works the same as the "Flexi Custom Code 1" demo.

Here is the code I have tried, without success. I'm stumped by this simple code. The file TankCalculator.php calls gettank.php and, using AXAX, should display the tank values without having to refresh the whole page. Unfortunately, TankCalculator.php just sits there doing nothing when the submit button is clicked. Where have I gone wrong?

Regards

Gary

==========================================

Code:

File name:  TankCalculator.php

<html>
<head>
<script type="text/javascript">
function TankCalc()
{
if (str=="")
{
  document.getElementById("TankValues").innerHTML="";
  return;
} 
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
	var xmlhttp = new XMLHttpRequest();
    var cdia = encodeURIComponent(document.getElementsByName('c_dia')[0].value);
    var cheight = encodeURIComponent(document.getElementsByName('c_height')[0].value);
  }
else
  {// code for IE6, IE5
	var xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	var cdia = encodeURIComponent(document.getElementsByName('c_dia')[0].value);
    var cheight = encodeURIComponent(document.getElementsByName('c_height')[0].value);
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("TankValues").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open('POST', 'gettank.php', true);
xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xmlhttp.send('c_dia=' + cdia + '&c_height=' + cheight);
}
</script>
</head>
<body>

	<form name="frm_c_tank">
	<table>
      <tr>
        <td>Cylindrical Tank</td>
      </tr>
      <tr>
        <td>Height(m)</td>
		<td><input name="c_height" type="text"></td>
        <td>Diameter(m)</td>
        <td><input name="c_dia" type="text"></td>
      </tr>
      <tr>
        <td><input name="calculate" type="button" value="Calculate" onClick="TankCalc()"></td>
      </tr>
    </table>
	</form>
	
	<div id="TankValues"><b>Tank Values Appear Here.</b></div>

</body>
</html>  

===============================================

File Name: gettank.php

<?php
 
	$c_dia = $_POST['c_dia']; 
	$ht_t = $_POST['c_height']; 
	$dia_t = $c_dia; 
	$dia_t = (($dia_t * $dia_t)/4);
	$ctank_val	= (3.1459 * $dia_t * $ht_t * 1000);
	$ctank_val_ml = (3.1459 * $dia_t * $ht_t);
	
	echo "The tank height is : <b> $ht_t </b><br>";  
	echo "The tank diameter is : <b> $c_dia </b><br>"; 


?>
<table>
<tr>
		<td>
          <input name="c_size_ml" value="<?php echo $ctank_val; ?>" type="text">&nbsp;Litres
        </td>
        <td>
          <input name="c_size_l" value="<?php echo $ctank_val_ml; ?>" type="text">&nbsp;m3
        </td>
</tr>
</table

Rowsdower! · 03-02-2012, 01:37 PM

There does not appear to be a file named "TankCalculator.php" any place that I can see (though I did locate "gettank.php"). And the page you linked to does not contain any of the script elements you posted.

I can tell you, though, that just from the code you posted you have not placed any break in the form's submission. That means that even if everything worked correctly with the AJAX your form would still submit the "old fashioned" way, causing a page load and thus losing your AJAX response. If nothing else, you might try adding return false; to the end of your submit button's onclick handler straight away:

Code:

        <td><input name="calculate" type="button" value="Calculate" onClick="TankCalc();return false;"></td>

If that doesn't fix the problem then I will need you to tell me where to find your "TankCalculator.php" file so that I can work with the code that is actually in use.

Gary Williams · 03-02-2012, 02:40 PM

Sorry, suffered a senior moment there.

The correct name for the first file is water-tank-calculator2.php

I tried the return false; but the page still did not respond.

Cheers

Gary

sunfighter · 03-02-2012, 03:13 PM

Gary, I think your confusing the GET method with the POST. You don't need to send parameters with the POST; you do with the GET.
I changed this to the GET method (easier)

Your Main page:

Code:

<html>
<head>
<script type="text/javascript">
function TankCalc()
{
// These values could have been sent as parameters
	var cdia = encodeURIComponent(document.getElementsByName('c_dia')[0].value);
	var cheight = encodeURIComponent(document.getElementsByName('c_height')[0].value);
// making the ajax object
	if (window.XMLHttpRequest)
	{// code for IE7+, Firefox, Chrome, Opera, Safari
		var xmlhttp = new XMLHttpRequest();
	}
	else
	{// code for IE6, IE5
		var xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
// waiting for the ajax program to get request and send answer
	xmlhttp.onreadystatechange=function()
	{
		if (xmlhttp.readyState==4 && xmlhttp.status==200)
		{
			document.getElementById("TankValues").innerHTML=xmlhttp.responseText;
		}
	}
// send the request
	xmlhttp.open("GET","gettank.php?height="+cheight+"&diameter="+cdia,true);
	xmlhttp.send('');   // I have seen the parameter for this as empty or NULL but this is what works
}
</script>
</head>
<body>

	<form name="frm_c_tank">
	<table>
      <tr>
        <td>Cylindrical Tank</td>
      </tr>
      <tr>
        <td>Height(m)</td>
		<td><input name="c_height" type="text"></td>
        <td>Diameter(m)</td>
        <td><input name="c_dia" type="text"></td>
      </tr>
      <tr>
        <td><input name="calculate" type="button" value="Calculate" onClick="TankCalc();"></td>
      </tr>
    </table>
	</form>

	<div id="TankValues"><b>Tank Values Appear Here.</b></div>

</body>
</html>

The called gettank.php has A change in it to work with my parameters

gettank.php:

PHP Code:


			
<?php



    $c_dia = $_GET["diameter"];

    $ht_t = $_GET["height"];

........REST OF PROGRAM

Gary Williams · 03-02-2012, 03:46 PM

Brilliant! It works perfectly! OK, time for me to hit the tutorials.

Many Thanks

Gary