Hallo Forumsfreunde,
ich habe mal angefangen mich mit AJAX zu befassen und mir das Beispiel:
http://rolfrost.de/cgi-bin/xmlhttpreq.cgi geladen und gelesen.
Jetzt wollte ich es mal auf PHP/MYSQL ändern und auf <SELECT> umstellen. Als Beispiel habe
ich Type / Modell für Auto genommen.
Die Datenbank:
ID Type ID TypeID Modell
1 VW 1 1 Polo
2 Ford 2 1 Passat
3 2 CMax
4 2 Focus
#index.php#
<?php include("connect.inc.php"); ?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Ajaxtest</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<script type=text/javascript>
var req;
function loadXMLDoc(url)
{
// branch for native XMLHttpRequest object
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
req.onreadystatechange = processReqChange;
req.open("GET", url, true);
req.send(null);
// branch for IE/Windows ActiveX version
} else if (window.ActiveXObject) {
req = new
ActiveXObject("Microsoft.XMLHTTP");
if (req) {
req.onreadystatechange =
processReqChange;
req.open("GET", url, true);
req.send();
}
}
}
</script>
<P>Type: <select name="type" id="type"
onChange="loadXMLDoc('xmlhttpreq.php?type='+document.getElementById('type').value);">
<option value="">[ Bitte auswählen ]</option>
<?php
$sql = mysql_query("SELECT ID,Type FROM type ORDER BY ID");
while($dat = mysql_fetch_row($sql)):
echo"<option value="$dat[0]">$dat[1]</option>";
endwhile;
?>
</select><BR>
<BR>
Modell:
<select id="modell">
<option value="">[ Bitte auswählen ]</option>
<script type=text/javascript>
function processReqChange()
{
// only if req shows "complete"
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200) {
// ...processing statements go here...
document.write ("req.responseText");
} else {
alert("There was a problem retrieving the XML data");
}
}
}
</script>
</select>
<br>
<hr>
<P> <script type=text/javascript>
function processReqChange()
{
// only if req shows "complete"
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200) {
// ...processing statements go here...
document.getElementById('res').value = req.responseText;
} else {
alert("There was a problem retrieving the XML data");
}
}
}
</script>
Anzeige OK:
<input id=res size="80">
</body>
</html>
#xmlhttpreq.php#
<?php
include("connect.inc.php");
$erg = "";
$sqlx = mysql_query("SELECT ID,Modell FROM modell WHERE TypeID = '".$_GET["type"]."' ORDER BY modell");
while($datx = mysql_fetch_row($sqlx)):
$erg .= "<option value=$datx[0]>$datx[1]</option>";
endwhile;
print $erg;
exit;
?>
Beim testen wird im <input id="res" size="80"> der req.responseText korrekt angezeigt. Im oberen Teil innerhalb <select id=modell> will ich diesen mit document.write einsetzen. Das funktioniert NICHT. Wo ist mein Fehler?
Alles zu sehen unter: http://ajaxtest-de.km21935-25.keymachine.de
Gruß Rainer