 Nieuw lid |
|
Goede middag samen,
zoals de titel zegt, ik wil me verdiepen in ajax. Lijkt me echt wel interessante materie.
Ben een zo'n dummies boek aan het lezen, had nog niet echt voorkennis van javascript, dus dat komt echt wel van pas.
Wat wil ik nu doen:
ik heb een database met een tabel waar allemaal serie titels instaan... ik wil dat deze via ajax verschijnen in een drop down menu.
Een gelijkaardige oefening staat in het boek, maar de mijne wil echt totaal niet werken.
Mijn head code:
<script language="javascript">
var XMLHttpRequestObject = false;
if( window.XMLHttpRequest )
{
XMLHttpRequestObject = new XMLHttpRequest();
}
else if ( window.ActiveXObject )
{
XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
}
var options;
function get_data()
{
if(XMLHttpRequestObject)
{
XMLHttpRequestObject.open("GET", "modules/p99/options.php", true);
XMLHttpRequestObject.onreadystatechange = function()
{
if( XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200 )
{
var xmlDocument = XMLHttpRequestObject.responseXML;
options = xmlDocument.getElementsByTagName("option");
listOptions();
}
}
XMLHttpRequestObject.send(null);
}
}
function listOptions()
{
var loopIndex;
var selectControl = document.getElementById('optionList');
for( loopIndex=0; loopIndex < options.length; loopIndex++ )
{
selectControl.options[loopindex] = new Option(options[loopIndex].firstChild.data);
}
}
</script>
<script language="javascript"> var XMLHttpRequestObject = false; if( window.XMLHttpRequest ) { XMLHttpRequestObject = new XMLHttpRequest(); } else if ( window.ActiveXObject ) { XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP"); } var options; function get_data() { if(XMLHttpRequestObject) { XMLHttpRequestObject.open("GET", "modules/p99/options.php", true); XMLHttpRequestObject.onreadystatechange = function() { if( XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200 ) { var xmlDocument = XMLHttpRequestObject.responseXML; options = xmlDocument.getElementsByTagName("option"); listOptions(); } } XMLHttpRequestObject.send(null); } } function listOptions() { var loopIndex; var selectControl = document.getElementById('optionList'); for( loopIndex=0; loopIndex < options.length; loopIndex++ ) { selectControl.options[loopindex] = new Option(options[loopIndex].firstChild.data); } } </script>
en dit staat in de body:
<h1>Alle series weergeven dmv ajax</h1>
<form>
<select size="1" id="optionList" onchange="setOption()">
<option>Klik eerst op de knop</option>
</select>
<input type="button" value="haal de series van de server" onclick="get_data()">
</form>
<div id="targetDiv">
</div>
<h1>Alle series weergeven dmv ajax </h1> <select size="1" id="optionList" onchange="setOption()"> <input type="button" value="haal de series van de server" onclick="get_data()">
en hier de php pagina die gefetched moet worden:
<?php
function connect_db() {
$dbhost = "****";
$dbuser = "****";
$dbpass = "****";
$dbname = "serie";
mysql_connect($dbhost,$dbuser,$dbpass)or die(mysql_error());
mysql_select_db($dbname)or die(mysql_error());
}
connect_db();
$sql = mysql_query("SELECT serie FROM serie ORDER BY serie ASC");
$array_serie = mysql_fetch_array($sql);
header("Content-type: text/xml");
echo '<?xml version="1.0"?>';
echo '<options>';
foreach( $array_serie as $value )
{
echo '<option'>;
echo '$value';
echo '</option>';
}
echo '</options>';
?>
<?php function connect_db() { $dbhost = "****"; $dbuser = "****"; $dbpass = "****"; $dbname = "serie"; } connect_db(); $sql = mysql_query("SELECT serie FROM serie ORDER BY serie ASC"); header("Content-type: text/xml"); echo '<?xml version="1.0"?>'; foreach( $array_serie as $value ) { } ?>
de foutconsole van mijn browser zegt dat de functie get_data() niet gedefinieerd is.
Weet iemand een oplossing voor mijn probleem?
Groeten
|
Wat is jouw favoriete javascript framework? (S: 18, R: 2)
Gesponsorde links
niet in opera en niet in firefox
)
Actiefste leden van de maand
