You are not logged in.

  • Login

AJAX mit Select Liste für Fahrzeugauswahl (hersteller > typ > hubraum > etc)

zapp

Trainee

  • "zapp" started this thread

Posts: 8

  • Send private message

1

Saturday, March 14th 2009, 5:21pm

AJAX mit Select Liste für Fahrzeugauswahl (hersteller > typ > hubraum > etc)

Hallo Leute, bin neu hier und auch in Ajax... und ich habe Arge Probleme...

Ich habe vor eine Suche nach Fahrzeugen aufzubauen, die üblichen verdächtigen sind hierbei die Daten

Hersteller
Typ
Hubraum
Leistung
Baujahr

All diese Felder können von Anfang an zu sehen sein, sollen jedoch dynamisch gefüllt werden.
Heisst also man wählt einen Hersteller --> Die Typen des Herstellers werden ins Select geschrieben -> Typ Wählen --> eingetragene Hubraum werte werden ins nächste Selectfeld eingetragen ... .usw..

Mit 2 Feldern funktioniere das auch ganz prima, nur jetzt stehe ich auf dem Schlauch.
Genutzt habe ich das hier LINK
für meinen bisherigen Fortschritt... nun denke ich müsste ich das sendRequest umstricken so dass es zwischen den Eingaben der verschiedenen Feldern unterscheiden kann und jeweils auf die richtge Funktion verweist, aber wie bekomme ich es hin das die Felder jeweils dynamisch gefüllt werden???

Ich weiß nicht weiter... :-/ kann mir jemand einen Denkanstoss geben?

hier mal mein code, das es verständlicher wird ..


komplett

Source code

 
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
93
94
95
96
97
98
99
100
101
102
103
104

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Testseite zum nachladen von Dynamischen Inhalten</title>

<script type="text/javascript">

<!--

function sendRequest(client) {
       if (client==1)
		{
	   var req;

        try {

                req = window.XMLHttpRequest?new XMLHttpRequest():

                new ActiveXObject("Microsoft.XMLHTTP");

        } catch (e) {

                //Kein AJAX Support

        }



        req.onreadystatechange = function() {
                if ((req.readyState == 4) && (req.status == 200)) {

                        document.getElementById('inhalt').innerHTML = req.responseText;
				}

        };
		var id = document.getElementById('dropdown').value;
        req.open('post', 'func.php');
		req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
		req.send('s='+id);
		}
		       if (client==2)
		{
	   var req;

        try {

                req = window.XMLHttpRequest?new XMLHttpRequest():

                new ActiveXObject("Microsoft.XMLHTTP");

        } catch (e) {

                //Kein AJAX Support

        }



        req.onreadystatechange = function() {
                if ((req.readyState == 4) && (req.status == 200)) {

                        document.getElementBy('inhalt').innerHTML = req.responseText;
				}

        };
		var id = document.getElementById('dropdown2').value;
        req.open('post', 'func.php');
		req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
		req.send('s='+ id);
		
		}
		}

//-->
</script>
</head>
<body>

<p />Wählen Sie einen Eintrag aus um den Inhalt zu laden
<p /><select id="dropdown" onChange="sendRequest(1)">
<?php
include 'connect.php';
$connection = mysqli_connect($host,$user,$password,$db) or die("Die Verbindung konnte nicht hergestellt werden.");
if($connection)
{
	$Status = "Verbindung hergestellt";

}

$sql = "SELECT manufacturer,manufacturer_name FROM `hsn_tsn`; ";
$result = mysqli_query($connection,$sql);

while($row = mysqli_fetch_object($result))
{
       echo '<option value="' . $row->manufacturer . '">' . $row->manufacturer_name . '</option>';
}

?>
</select>

<div id="inhalt"></div>
</body>
</html>


Und nach diesem Code hier

Source code

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<p /><select id="dropdown" onChange="sendRequest(1)">
<?php
include 'connect.php';
$connection = mysqli_connect($host,$user,$password,$db) or die("Die Verbindung konnte nicht hergestellt werden.");
if($connection)
{
	$Status = "Verbindung hergestellt";

}

$sql = "SELECT manufacturer,manufacturer_name FROM `hsn_tsn`; ";
$result = mysqli_query($connection,$sql);

while($row = mysqli_fetch_object($result))
{
       echo '<option value="' . $row->manufacturer . '">' . $row->manufacturer_name . '</option>';
}

?>
</select>



müssten dann ja weitere Dropdowns folgen, welche schon angezeigt werden, allerdings erst gefüllt, wenn der wert aus dropdown 1 gesendet wurde.
Und genau da hakt es bei mir... :-(


Gruß
Sebastian

This post has been edited 1 times, last edit by "zapp" (Mar 14th 2009, 6:11pm)

Torben Brodt

Administrator

Posts: 8,454

  • Send private message

2

Saturday, March 14th 2009, 7:34pm

Hast du die Links im Wiki ganz unten gesehen? Dort sind schon Beispiele mit bis zu 4 Selects behandelt worden.
Am Namen des Formularelements kannst du gut entscheiden, wie damit zu verfahren ist, welcher Callback gerufen wird und welches Element daraufhin wieder bearbeitet wird.

Ich hatte mal ein übersichtlicheres Howto angefangen (zumindest den Code dazu).. vielleicht kann ich morgen einen Ausschnitte posten.
Ansonsten fährst du fürs Erste mit der Lösung auf den Beiträgen auch ganz gut.
Latest blogs Latest blogs: Neuer EX4 Server, Java EE Summit im Juni in München, Kostenlos zur Cebit + Windows 8 Entwickler Schulung

zapp

Trainee

  • "zapp" started this thread

Posts: 8

  • Send private message

3

Sunday, March 15th 2009, 12:25am

Leider leider nicht... ist ja schon ein Unterschied zwischen dem was da im Wiki steht und dem was ich vorhabe.
Hätte ich es damit hinbekommen hätte ich nicht gepostet... :-(
Mein Problem ist ja das ich nicht möchte das da neue Felder "erscheinen" durch die Auswahl, sondern möchte das bereits vorhandene Felder gefüllt, bzw. überladen werden.
Da liegt das Problem begraben bei mir.. :-(

Torben Brodt

Administrator

Posts: 8,454

  • Send private message

4

Sunday, March 15th 2009, 11:10am

Ich habe das Wiki aktualisiert - du findest den neuen Code hier:
Select-Auswahl mit AJAX Abhängigkeit

Das Beispiel ist zwar wesentlich komplexer geworden, aber dafür auch einfacher in der Verwendung.

Im konkreten Beispiel wurde entschieden abhängige Select-Auswahlfelder erst anzuzeigen, sobald das Elternelement die notwendige Auswahl getroffen hat. Sollte es besser ins Layout passen und du willstt stattdessen leere Listenelemente verwendet, so entfernt einfach die style Eigenschaft display:none. Das müsst du sowohl im HTML Code machen, als auch im JavaScript Quelltext - dort alle display Aufrufe entfernen.
Latest blogs Latest blogs: Neuer EX4 Server, Java EE Summit im Juni in München, Kostenlos zur Cebit + Windows 8 Entwickler Schulung

Similar threads

Tagging

Social bookmarks