Test: AJAX dynamic selects
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
Misschien leuk om Code nog te laten weergeven zodat andere mensen er ook wat aan hebben ;)
Gewijzigd op 01/01/1970 01:00:00 door Thijs X
Ziet er goed uit Jan
1 suggestie :
Ga vooral zo door :P
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 ;)
Misschien leuk om Code nog te laten weergeven zodat andere mensen er ook wat aan hebben ;)
De hoofdpagina:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<?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éé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>
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éé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:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<?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>';
}
?>
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:
Code (php)
Gewijzigd op 01/01/1970 01:00:00 door Jan Koehoorn
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)
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)
@ 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.
Jan Koehoorn schreef op 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.
@ 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.
-> Is dat zo? Het is wel een mooi extra'tje vind ik, maar het hoeft niet. Stel dat ik appel kies uit box2, en ik wil dan bijvoorbeeld alle items zien die voldoen aan het criterium/ de criteria.
Het maakt dan niet uit of de 1e selectbox leeg is. -> Immers via je database is een appel al gekoppeld aan de categorie "fruit". Klik ik op zoeken bij appel, dan zal die alle appels weergeven.
Kan ik een item niet vinden in de 2e selectbox, dan kies ik fruit in de 1e en kijk opnieuw in de verkorte lijst. Zie ik hem nog niet, maak ik geen keuze in het 2e vak en kies zoeken. Ik krijg dan alles met als categorie "fruit".
Het is ook maar net waar je het voor wilt gebruiken, maar ik vind jou idee voor het bijwerken van selectbox 1 ook wel erg goed bedacht. Een soort van wisselwerking tussen beide selects.
Als het je lukt zou dat wel mooi zijn, maar je zit wel met 1 probleem dan. -> ik wil bloemkool kiezen, maar net boven bloemkool staat banaan (dus uit een andere categorie)
Ik klik verkeerd, je bovenste veld verspringt naar fruit, en ik kan bloemkool niet meer kiezen. -> moet eerst "geen" categorie selecteren, of "groente" en dan vervolgens alsnog bloemkool.
Dit is dus niet erg gebruiksvriendelijk.
Wat je evt wel kan doen is controleren of er een categorie is gekozen, zo ja -> niets veranderen als je een naam kiest. Zo nee -> Geef naast je 2e selectbox weer uit welke categorie het item komt. (wel lastig te maken, maar ik denk de meest gebruiksvriendelijke oplossing voor het vraagstuk)
Heel mooi voorbeeld van dynamische selects met AJAX. Een vraagje echter: is het ook mogelijk om meer dan 2 selects te linken?
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
function init () {
document.getElementById ('ctrl_country').onchange = function () {
return handle_country (this.value);
}
document.getElementById('ctrl_region').onchange = function(){
return handle_region(this.value);
}
}
document.getElementById ('ctrl_country').onchange = function () {
return handle_country (this.value);
}
document.getElementById('ctrl_region').onchange = function(){
return handle_region(this.value);
}
}
Gewijzigd op 01/01/1970 01:00:00 door M