...

View Full Version : 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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum