Test: AJAX dynamic selects

Door Jan Koehoorn op 04-04-2007 11:50

591 views

PHP vrienden (en vriendinnen),

in het kader van mijn OOP- en AJAX adventures zou ik graag willen dat jullie even kijken naar een testpagina voor dynamische selects. Ik ben benieuwd of het crossbrowser werkt en sta open voor suggesties.

groeten, Jan

Thijs X

04-04-2007 11:52

Werkt perfect in IE 6 hier

Misschien leuk om Code nog te laten weergeven zodat andere mensen er ook wat aan hebben ;)

Onbekende gebruiker

04-04-2007 11:53

NIiiiiceee. Hij werkt op Firefox, en vlekkeloos. Suggesties? Nee, niet echt, omdat het ook maar een voorbeeld is he :P

Jacco Engel

04-04-2007 11:56

Hier foutloos in Opera en FF2

Ziet er goed uit Jan
1 suggestie :
Ga vooral zo door :P

Frank Keulen

04-04-2007 12:02

Foutloos in IE7 & FF2

Jan Koehoorn

04-04-2007 12:02

thijs schreef op 04.04.2007 11:52
Werkt perfect in IE 6 hier

Misschien leuk om Code nog te laten weergeven zodat andere mensen er ook wat aan hebben ;)

De hoofdpagina:


<?php
	ini_set ('display_errors', 1);
	error_reporting (E_ALL);

	require 'classes/class.basic.php';
	require 'classes/class.database.php';
	$db = new database ();
?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
	<title>AJAX Casestudy</title>

	<script type="text/javascript" src="xmlhttp.js"></script>
	<script type="text/javascript">
		var xmlhttp, categorie;

		window.onload = init;

		function init () {
			document.getElementById ('voedsel_categorie').onchange = function () {
				return handle_categorie (this.value);
			}
		}
		
		function handle_categorie (value) {
			if (xmlhttp = get_xmlhttp_object ()) {
				xmlhttp.onreadystatechange = function () {
					if (xmlhttp.readyState == 4) {
						// doe iets met xmlhttp.responseText;
						document.getElementById ('naamdeel').innerHTML = xmlhttp.responseText;
					}
				}
				xmlhttp.open ("GET", "ajax_casestudy2.php?categorie_id=" + value, true);
				xmlhttp.send (null);
			}
		}
	</script>

	<style type="text/css">
	@import 'oop.css';
	</style>
</head>

<body>
	<div id="container">
	<div class="wrapper">
	<h1>AJAX casestudy</h1>
	<p>Voor dynamische gelinkte selectboxen is meestal veel JS code nodig om ze werkend te krijgen.</p>
	<p>Dit script gebruikt AJAX (inderdaad, da's <strong>ook</strong> JS, maar niet zov&eacute;&eacute;l :P) in combinatie met PHP/MySQL.</p>
	<p>Na een keuze uit de selectbox voor categorie moet er een andere verschijnen met de juiste opties.</p>
	<h1>Kies een voedselcategorie</h1>
	<form method="post" action="#">
	<p>
	<?php
		$sql = "
			SELECT *
			FROM voedsel_categorie
			ORDER BY naam ASC
			";
		if ($db->query ($sql)) {
			echo '<label for="voedsel_categorie">voedselcategorie:</label>';
			echo '<select id="voedsel_categorie" name="voedsel_categorie" class="medium">';
			echo '<option value="0" selected="selected"> - kies een categorie - </option>';
			while ($row = $db->fetch ()) {
				echo PHP_EOL . '<option value="' . $row['id'] . '">' . $row['naam'] . '</option>';
			}
			echo '</select>';
		}
	?>
	</p>
	<p id="naamdeel"></p>
	<p>
		<input type="submit" value="verzenden">
	</p>
	</form>
	<?php
		if ($_SERVER['REQUEST_METHOD'] == 'POST') {
			echo '<pre>';
			print_r ($_POST);
			echo '</pre>';
		}
		require 'errs.php';
	?>
	</div>
	</div>
</body>
</html>

De pagina die door AJAX aangeroepen wordt:


<?php
	require 'classes/class.basic.php';
	require 'classes/class.database.php';
	$db = new database ();
	
	$categorie_id = (isset ($_GET['categorie_id']))?($_GET['categorie_id']):(0);
	$sql = "
		SELECT id, naam
		FROM voedsel_naam
		WHERE categorie_id = " . $categorie_id . "
		ORDER BY naam ASC
		";
	if ($db->query ($sql)) {
		echo '<label for="voedsel_naam">voedselnaam:</label>';
		echo '<select id="voedsel_naam" name="voedsel_naam" class="medium">';
		echo '<option value="0"> - kies een naam - </option>';
		while ($row = $db->fetch ()) {
			echo PHP_EOL . '<option value="' . $row['id'] . '">' . $row['naam'] . '</option>';
		}
		echo '</select>';
	}
?>

De errorpagina:


	<?php
		$errs = $db->get_errs ();
		if (!empty ($errs)) {
			echo '<div class="errs">';
			foreach ($errs as $err) {
				echo $err;
			}
			echo '</div>';
		}
	?>

Robert Deiman

04-04-2007 12:02

Werkt hier prima in IE5.5, IE6, IE7, FF1.5, FF2 en Opera.

Een suggestie is om nog als je het eerste veld waarin je de soort kiest weer terugzet naar --kies een categorie-- dat je dan het veld weer laat verdwijnen waarin je --kies een naam-- hebt staan.

Wat ook mooi is, vind ik is als je meteen al de 2 selects hebt staan, waarin alle namen in de 2e selectbox alfabetisch staan gesorteerd. Om hierin niet zo lang te hoeven zoeken kan je dan de 1e selectbox gebruiken om het rijtje te verkleinen naar de categorie waaruit je een item wilt vinden. (hopelijk leg ik het duidelijk genoeg uit)

Jan Koehoorn

04-04-2007 12:05

@ Robert: goeie tips, tnx! (Duidelijk genoeg :-))

Frank -

04-04-2007 12:10

In Safari werkt het ook prima. Ziet er leuk uit.

Robert Deiman

04-04-2007 12:15

Mijn 2e tip is denk ik ook mooi in combinatie met je suggestion script die we van de week testten. Je hebt nu alleen/ vooral plaatsen uit N-H in je lijst staan, maar als je een array met plaatsen door heel nederland hebt, kan je ze bijvoorbeeld indelen op regio/ provincie.
Kies je eerst een provincie wordt je search beperkt tot plaatsen in die provincie (scheelt een slok op een borrel, voor de lengte van je suggestielijst) Misschien een leuke combinatie voor die 2.

(dit is nu niet echt van belang voor dit topic, dat weet ik ook wel, maar ik vond het wel een leuk idee, en die wou ik je niet onthouden)

Jan Koehoorn

04-04-2007 12:20

@ Frank: aha, daar was ik vooral ook benieuwd naar, thanks!
@ Robert: meteen een tweede selectbox met alle mogelijkheden kan zeker, maar: stel dat iemand niets kiest uit box 1 en meteen iets kiest uit box 2. Dan zou in box 1 wel weer automatisch de juiste categorie gekozen moeten worden natuurlijk. Ga ik even over nadenken.

Reageren

Inloggen om te reageren