n00b..tired and beaten - Ajax PHP - update div async. Help appreciated


DevX Home    Today's Headlines   Articles Archive   Tip Bank   Forums   

Results 1 to 7 of 7

Thread: n00b..tired and beaten - Ajax PHP - update div async. Help appreciated

Hybrid View

  1. #1
    Join Date
    Aug 2008
    Posts
    3

    n00b..tired and beaten - Ajax PHP - update div async. Help appreciated

    Hi all,

    I will appreciate any help coming my way. I did start with grand plans but am now beaten to pulp by AJAX not showing any signs of execution.

    I want to update a simple div with updated text input through a form on the same page. Without , naturally, reloading the whole page.

    My web page looks like this

    Code:
    <html>
    
    <head>
    <meta http-equiv="Content-Language" content="en-au">
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Length</title>
    <script src="javascripts/prototype.js" type="text/javascript"></script>
    <script src="javascripts/scriptaculous.js" type="text/javascript"></script>
    <script type="text/javascript">
     /* ajax.Request */  
     function ajaxRequest(url,data) { 
     	$('chart').innerHTML = data; 
       var aj = new Ajax.Request(  
       url, {  
        method:'get',   
        parameters: data,   
        onComplete: getResponse  
        }  
       );  
     }  
     /* ajax.Response */  
     function getResponse(oReq) {  
       $('chart').innerHTML = oReq.responseText;  
     }  
    </script>
    </head>
    <body>
    	Length <input type="text" name="length" size="4"> </p>
    	<p>Width&nbsp; <input type="text" name="width" size="4"></p>
    	<p><input type="button" value="Redraw" name="submit" onclick="ajaxRequest('imgHolder.php','len='+$F('length'))"></p>
    
    <div id="chart"></div>
    </body>
    
    </html>
    The imgHolder.php code is :

    Code:
    <?php
    
       if(isset($_GET['len'])) {  
          echo "You entered: ".$_GET['len'];  
        }  
    
    ?>
    It doesn't work. I don't know what I am doing wrong here because most of this is from different tutorials. This is the first time I am attempting any web programming so maybe I am missing something obvious here.

    Any help will be really appreciate.

    Thanks

    SD

  2. #2
    Join Date
    Apr 2007
    Location
    Sterling Heights, Michigan
    Posts
    8,666
    Welcome to DevX

    What do you mean by "it doesn't work"?

    Are you getting an error? If so, what is it?
    I don't answer coding questions via PM or Email. Please post a thread in the appropriate forum section.
    Please use [Code]your code goes in here[/Code] tags when posting code.
    Before posting your question, did you look here?
    Got a question on Linux? Visit our Linux sister site.
    Modifications Required For VB6 Apps To Work On Vista

  3. #3
    Join Date
    Aug 2008
    Posts
    3

    Smile Thanks for the welcome. Clarification.

    Hi Hack,

    Thanks for the welcome and the prompt response.

    I believe apologies are in order for the seemingly meaningless subject. I read the etiquette post after I had posted. Regret in retrospect.

    "It doesn't work" means that I do not see the div updated with the new text. In fact when I used firebug to see the source of the page, the innerHTML of the div contains nothing. It appears that the values do not get passed from the main page to the php to process the request.

    Cheers

    SD

  4. #4
    Join Date
    May 2007
    Posts
    6
    HI...

    I think the problem lies in the request itself. You are using "GET" method. But for the url, you are not passing any name for the parameters.
    Try using this code

    Code:
    <html>
    
    <head>
    <meta http-equiv="Content-Language" content="en-au">
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Length</title>
    <script src="javascripts/prototype.js" type="text/javascript"></script>
    <script src="javascripts/scriptaculous.js" type="text/javascript"></script>
    <script type="text/javascript">
     /* ajax.Request */  
     function ajaxRequest(url) { 
     	var ldata="?len="+$('len').value; 
    	var wdata=ldata+"&wid="+$('wid').value; 
       var aj = new Ajax.Request(  
       url, {  
        method:'get',   
        parameters: wdata,   
        onComplete: getResponse  
        }  
       );  
     }  
     /* ajax.Response */  
     function getResponse(oReq) {  
       $('chart').innerHTML = oReq.responseText;  
     }  
    </script>
    </head>
    <body>
    	Length <input type="text" name="length" size="4" id='len'> </p>
    	<p>Width&nbsp; <input type="text" name="width" size="4" id='wid'></p>
    	<p><input type="button" value="Redraw" name="submit" onclick="ajaxRequest('imgHolder.php')"></p>
    
    <div id="chart"></div>
    </body>
    
    </html>


    Code:
    <?php
    
       if(isset($_GET['len'])) {  
          echo "You entered (length): ".$_GET['len']."<br/>You entered (Width): ".$_GET['wid'];  
        }  
    
    ?>
    Last edited by thinktejas; 09-01-2008 at 09:44 AM.
    More on PHP Ajax and other technologies @ my homepage:
    www.tejuspratap.com

  5. #5
    Join Date
    Mar 2007
    Location
    Bangalore, India
    Posts
    247
    May I ask what exactly does imgHolder.php return? And what do you see when you run it directly on your browser?

  6. #6
    Join Date
    Aug 2008
    Posts
    3

    Problem fixed

    Hi all,

    the problem was fixed. Please go through the code above to spot it. It was a simple error in syntax.

    Cheers

  7. #7
    Join Date
    Apr 2007
    Location
    Sterling Heights, Michigan
    Posts
    8,666
    An out of place semi-colon?
    I don't answer coding questions via PM or Email. Please post a thread in the appropriate forum section.
    Please use [Code]your code goes in here[/Code] tags when posting code.
    Before posting your question, did you look here?
    Got a question on Linux? Visit our Linux sister site.
    Modifications Required For VB6 Apps To Work On Vista

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center
 
 
FAQ
Latest Articles
Java
.NET
XML
Database
Enterprise
Questions? Contact us.
C++
Web Development
Wireless
Latest Tips
Open Source


   Development Centers

   -- Android Development Center
   -- Cloud Development Project Center
   -- HTML5 Development Center
   -- Windows Mobile Development Center