Simple Ajax question

Anishgiri

10-16-2010, 11:48 AM

I am not very familiar with AJax, and for simplicity sake, I am trying a simple code. When I click the text box it should change the text, but it did not change. Is there something wrong with the code? I know this can be done with out using AJAX, but I want to test AJAX.

page1.php
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>AJAX TEST</title>

<script type="text/javascript">
function box1(str)
{

if (str.length==0)
{
document.getElementById("box").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("box").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","addtruck.php);
xmlhttp.send();
}
</script>
</head>
<body>

<input type="text" size="10" onClick="box1()">
<span id="box">this should change</span>

</body>

</html>

addtruck.php

<?php

echo "hello there";

?>

Zefris

10-16-2010, 01:18 PM

xmlhttp.open("GET","addtruck.php);

... should be...

xmlhttp.open("GET","addtruck.php");

;O

DaveyErwin

10-16-2010, 01:56 PM

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>AJAX TEST</title>

<script type="text/javascript">

req =
(function () {
if (window.XMLHttpRequest) {
return function () {
return new XMLHttpRequest();
};
} else if (window.ActiveXObject) {
/*@cc_on@*/
/*@if (@_jscript_version >= 5)
try {
return function () {
return new ActiveXObject("Msxml2.XMLHTTP");
};
} catch (e) {
try {
return function () {
return new ActiveXObject("Microsoft.XMLHTTP");
};
} catch (E) {
return function () {
return function () { null };
};
}
}
@end@*/
}
})();

xmlhttp=req()
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById('box').innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","addtruck.php",true);

function box1(str)
{
if (str.length==0)
{
return;
}

xmlhttp.send(null);
}
</script>

</head>
<body>

<input type="text" size="10" onClick="box1(value)">
<span id="box">this should change</span>

</body>

</html>

Anishgiri

10-17-2010, 12:01 AM

Thanks for the reply,

Now I am trying AJAX with the html select, but it does not work, tested the code without out select it works, but with selectit does not dynamically display the select with option values.

html code

<select name="typeoftruck">

<div id='addlist'></div>
</select>

addtruck.php
<?php
session_start();
//connect to the database
$db=mysql_connect ("localhost", "root") or die ('I cannot connect to the database because: ' . mysql_error());
//-select the database to use
$mydb=mysql_select_db("infodata");
$str2 = $_GET['q'];

$sql="insert into truckdropdown(trucklist) values('$str2') ";
$result=mysql_query($sql);

$sql="SELECT trucklist from truckdropdown ";
$result=mysql_query($sql);
while($row=mysql_fetch_array($result)){
$truckvar=$row['trucklist'];
echo "<option value=''>".$truckvar."</option>";
}

?>

Zefris

10-17-2010, 12:51 AM

Assuming you're going to do something like...

document.getElementById('addlist').innerHTML = xhr.responseText;

Try changing the HTML to this...

<select id="addlist" name="typeoftruck"></select>

Anishgiri

10-17-2010, 01:11 AM

Now it works, thanks.