Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    Sep 2002
    Location
    South East UK. 35 miles east of London, in sight of the River Thames.
    Posts
    297
    Thanks
    10
    Thanked 0 Times in 0 Posts

    Cannot get the AJAX call to work

    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

  • #2
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    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.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #3
    Regular Coder
    Join Date
    Sep 2002
    Location
    South East UK. 35 miles east of London, in sight of the River Thames.
    Posts
    297
    Thanks
    10
    Thanked 0 Times in 0 Posts
    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

  • #4
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,763
    Thanks
    23
    Thanked 548 Times in 547 Posts
    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

  • Users who have thanked sunfighter for this post:

    Gary Williams (03-02-2012)

  • #5
    Regular Coder
    Join Date
    Sep 2002
    Location
    South East UK. 35 miles east of London, in sight of the River Thames.
    Posts
    297
    Thanks
    10
    Thanked 0 Times in 0 Posts
    Brilliant! It works perfectly! OK, time for me to hit the tutorials.

    Many Thanks

    Gary


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •