Need simple ajax/php help

thenewprogrammer · Nov 2, 2009

Trying to echo out a javascript from a javascript when i press button on html page which sounds stupid but just trying to get it to work. Nothing happens and im new to this and in search of answers.

html page

Code:

<html>
<head>
<script type="text/javascript" src="clienthint.js"></script>
</head>
<body>
<form>
First Name: <input type="button" id="txt1" value="Click Me" onclick="sub()" />
</form>
<div id="txtHint"></div><p><a href="[URL]http://www.w3schools.com[/URL]">
<img border="0" alt="Visit W3Schools!" src="b_pink.png" id="b1" /></a></p>
</body>
</html>

clienthint.js

Code:

var xmlhttp
function sub(){
 
xmlhttp=GetXmlHttpObject();
var url="gethint.php";
url=url+"&sid="+Math.random();
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}
function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
  {
  // code for IE7+, Firefox, Chrome, Opera, Safari
  return new XMLHttpRequest();
  }
if (window.ActiveXObject)
  {
  // code for IE6, IE5
  return new ActiveXObject("Microsoft.XMLHTTP");
  }
return null;
}

gethint.php

Code:

<?php
echo "<script type=\"text/javascript\">
 document.getElementById('txtHint').innerHTML = 'jimmy jones';
</script>";
?>

What suppose to happen is when i click the button it will say jimmy jones underneath it without refreshing where div txthint is at. Knew to this so point out how i can get this to work been stuck for while

Scoochi2 · Nov 2, 2009

Replace the line in your HTML with the link to:

HTML:

First Name: <input type="button" id="txt1" value="Click Me" onclick="javascript:sub()" />

...might help?

descalzo · Nov 2, 2009

Two problems.....

The first, you are sending a request for a file but you are doing nothing with it.
You have to include code to take the returned text and do something.

clienthint.js

Code:

var xmlhttp
function sub(){
 
xmlhttp=GetXmlHttpObject();
var url="gethint.php";
 
#### MINOR ERROR...RUNS ANYWAY, BUT..
#        url=url+"&sid="+Math.random();  # SHOULD BE
 
url=url+"?sid="+Math.random();  # SINCE YOUR URL DOES NOT YET HAVE 
                                        # A QUERY STRING
 
## ALSO, IF YOU ARE ONLY USING THE FUNCTION ONCE,
##  OR IF THE INFORMATION RETURNED
## DOES NOT CHANGE, YOU DO NOT NEED TO ADD THE RANDOM NUMBER 
## TO PREVENT CACHING
 
xmlhttp.open("GET",url,true);
 
#####
##### STANDARD WAY TO HANDLE RETURNED INFORMATION
#####  ASSIGN A FUNCTION TO THE onreadystatechange  OF YOUR REQUEST
##### THIS WILL BE CALLED WHEN IT CHANGES STATE
 
        xmlhttp.onreadystatechange = function(){
 
##### YOU WANT THE STATE TO BE '4' (COMPLETION)
##### AND YOU WANT THE STATUS TO BE 200 (IE GOOD RESPONSE FROM SERVER)
 
            if( xmlhttp.readyState == 4 && xmlhttp.status == 200 ){
 
#####    IF YOU ARE RETURNING JAVASCRIPT, JUST eval() IT 
 
                eval( xmlhttp.responseText ) ;
            }
         } ;
 
 
xmlhttp.send(null);
}

Since you are going to eval() the returned Javascript, you do not need the script tags...

gethint.php

Code:

<?php
echo "document.getElementById('txtHint').innerHTML = 'jimmy jones';" ;
 
?>

misson · Nov 2, 2009

In cases where eval() isn't safe, have the response handler set the content:

Code:

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

gethint.php (note: <?php and ?> tags unnecessary in this instance):

PHP:

jimmy jones

Need simple ajax/php help

thenewprogrammer

New Member

Scoochi2

New Member

descalzo

Grim Squeaker

misson

Community Paragon

Free Web Hosting

Our Community

Legal