Ajax in Select-Feldern?

[Markus_Barnick]

Liebe/-r Experte/-in,

ich habe von Ajax nicht viel Ahnung. Das Ganze ist neu für mich. Mit Javascript bin ich auch nicht gerade befreundet - nur mit PHP.

Ich soll 3 Select-Option-Auswahlmenüs machen.
Beim Start werden die Daten (option-Tag) für die erste Box aus der Datenbank gelesen und angezeigt.

Beispiel: Planeten, Universen, Milchstraßen

Wenn man einen onChange macht, dann werden in der 2. Box die Daten für diese Box aus der Datenbank gelesen. Diese Daten sind abhängig vom gewählten Punkt in der Box 1.

Beispiel: Planeten -> Wasserplaneten, Feuerplaneten, Sandplaneten

Wenn man in der 2. Box einen onChange macht, dann sollen die Daten für das 3. Select-FEld aus der DB gelsen werden. Diese Daten sind abhängig vom gewählten Punkt in Box 2 und 1.

Beispiel: Planeten -> Wasserplaneten -> Erde, Mars, Planet X

wie realisiere ich das mit Ajax? Die (aktive im Browser geladene) Seite darf dazu nicht (wie mit PHP über den REQUEST) reloadet werden. Deshalb Ajax. Ein Initialisierungsscript für Ajax habe ich bereits.

Nur die Umsetzung meines Problemes und die Werteübergabe der Select-Boxen fehlt mir noch. Ich habe es bisher nicht geschafft die (wenigen verständlichen Tutorials im Netz) auf mein Problem anzuwenden.

Vielen dank für die Hilfe.

[Anonym_cba6e079a7c4]

Hi Markus,

wir verwenden immer das javascript framework jquery f. die ajax-kommunikation, d.h. du musst eine halbwegs aktuelle jquery-version einbinden, um das Bsp. nachzubauen. Also jquery bibliothek downloaden, auf deinem server ablegen und im html head z.B.:

Dann das simpelste Vorgehen:
den selectboxen id="…" verpassen, z.B. sel1, sel2, sel3.
das 1. select mit onchange=„myAjaxSelect(this, ‚sel2‘)“ .
das 2. select mit onchange=„myAjaxSelect(this, ‚sel3‘)“ .
Deine Javascript Funktion:
function myAjaxSelect(caller, dependantId) { … }
kann mit jquery methoden recht einfach aus dem caller dessen id und aktuellen value auslesen. Wenn der caller sel2 ist, musst du noch sel1 referenzieren und dessen value auslesen. Wenn der caller hingegen sel1 ist, gibt’s keinen sel2-Value. Die values von sel1 und sel2 kannst du dann wiederum sehr kompakt in einem aufruf an die Verarbeitungs-URL (dein PHP) senden und dessen Rückgabe auswerten, mit der jquery funktion $.ajax() .
Das PHP skript erkennt an den übergabeparametern, welche option-List gefordert ist (sel2 o. sel3), und gibt einfach den fertigen html-code (ohne select!) aus. Diese Ausgabe kann dann - wir sind wieder in $.ajax() - in die abhängige selectbox geschmissen werden: $(’#’+dependantId).html(…);

Doku:
http://api.jquery.com/jQuery.ajax/
… und immer schön mit firebug kontrollieren, was denn nun wirklich passiert im DOM-Tree. Was auf PHP-Seite passiert, solltest du von vornherein in eine Datei loggen, denn error outputs würden bei dieser implementierung nur bewirken, dass eine php-fehlerausgabe als innerHtml in eine selectbox injiziert wird - folgezustand undefiniert (invalid html).

Gruß
Thomas

[Furchtb_r]

Hallo Markus. Ich bin zurzeit im Urlaub und kann nur über mein Handy antworten. Ajax
Beispiele findest du wenn du nach dem Ajax-Praxis Buch googelst. Mit jedem von dir
beschriebenen onchange Event müsstest du mit Ajax eine Seite aufrufen und über die post
oder get Parameter die entsprechende Auswahl des Users übergeben. Die Ausgabe der mit
Ajax aufgerufenen Seite musst du dann verarbeiten und die Select Box mit JavaScript um
die Elemente erweitern.

Ich rate dir selfhtml als Anlaufstelle für JavaScript. Gern erkläre ich es ausführlicher wenn ich
am 21.04. Wieder da bin oder du konsultierst einen weiteren Experten. Viel Erfolg

[anon98374820]

Hi,

Im Bezug auf Ajax bin ich leider selbst noch nicht so weit, ich lerne es auch gerade. Ich hätte dir ne Version mit reload anbieten können, aber ich weiß wie hässlich das aussieht

Sorry aber da kann ich dir leider nicht helfen!

Grüße

[Markus_Barnick]

hallo Thomas und danke erstmal.

ich versteh zwar die Grundidee, aber die Umsetzung krieg ich nicht hin.
Auf der jQuery-Seite blick ich auch das englsiche Fachchinesisch nicht und weiß auch nicht wonach ich da suchen soll oder wie ich da welche funktion anwende. Da steht soviel außen rum. Weiß gar nicht wo nach was gucken … Habe von Ajax und Jquery sehr sehr wenig Ahnung.

* beim Aufruf von myAjaxSelect(this, sel2) … ->> bezieht sich sel2 auf die vorherige oder die nachfolgende Select-box?
* wenn ich wüsste mit welchen methoden von jquery und wie man das ausliest wäre ich schon weiter
* bei der letzten box habe ich ja Bezüge zur 1. und zur 2. Box. Müsste es da nicht heißen myAjaxSelect(this, sel1, sel2) …?
* wie sende ich denn mit jquery die Sachen nach php?
* und wie kriege ich sie zurück? einen $_REQUEST werde ich hier nicht haben, oder?

Ich habs bisher so:

<!–
function myAjaxSelect(caller, dependantId)
{
… funktion fehlt noch
}
//–>

$sql = „SELECT * FROM pta_k1 ORDER BY k1name“;
$r = mysql_query($sql, $conn);
while ($d = mysql_fetch_array($r))
{
?>
=$d[‚k1name‘]?>
}
?>

$sql = „SELECT * FROM pta_k2 WHERE k1=’“…"’ ORDER BY k2name";
$r = mysql_query($sql, $conn);
while ($d = mysql_fetch_array($r))
{
?>
=$d[‚k2name‘]?>
}
?>

$sql = „SELECT * FROM pta_k3 WHERE k1=’“…"’ AND k2=’"…"’ ORDER BY k3name";
$r = mysql_query($sql, $conn);
while ($d = mysql_fetch_array($r))
{
?>
=$d[‚k3name‘]?>
}
?>

Vielen Dank für die Hilfe

[artViper_918085]

Hallo,

nun, das dürfte relativ einfach zu lösen sein. Nehmen wir an, Select Feld1 hat die ID SL1, Select Feld2 die SL2 usw.

Ich nehme wetierhin an, dass jQuery zum Einsatz kommt; mit leichten Änderungen funktioniert das Script aber ebenfalls mit mootools.

Zu aller erst benötigen wir den Trigger, der die Anzeige / Neugenerierung innerhalb von SL2,abhängig von dem gewählten SL1 Eintrag, erledigt:

$(’#SL1’).onchange(function(e){

// hier holen wir den Wert, den wir soeben durch das onChange Event geändert haben

var sel = $(’#SL1’).getSelected();

// jetzt lösen wir den aufruf aus, der SL2 befüllen wird:

$.ajax({ url:‚myurl.php‘,
type:‚post‘,
data: sel // hier übergeben wir den Wert
success:function(ret){

$(’#SL2’).html(ret);
}
}
})

IE könnte hier Probleme machen, da dieser sehr eigene Ideen hat, wann ein Element neu gerendert werden soll, ich empfehle daher eher, das gesamte Select Feld neu zu schreiben und das als Rückgabewert aus der $.ajax Funktion zu nutzen.

Hoffe, ich konnte einigermassen helfen.

viele Grüße
F. Herget

Ich soll 3 Select-Option-Auswahlmenüs machen.
Beim Start werden die Daten (option-Tag) für die erste Box aus
der Datenbank gelesen und angezeigt.

Beispiel: Planeten, Universen, Milchstraßen

Wenn man einen onChange macht, dann werden in der 2. Box die
Daten für diese Box aus der Datenbank gelesen. Diese Daten
sind abhängig vom gewählten Punkt in der Box 1.

Beispiel: Planeten -> Wasserplaneten, Feuerplaneten,
Sandplaneten

Wenn man in der 2. Box einen onChange macht, dann sollen die
Daten für das 3. Select-FEld aus der DB gelsen werden. Diese
Daten sind abhängig vom gewählten Punkt in Box 2 und 1.

Beispiel: Planeten -> Wasserplaneten -> Erde, Mars, Planet X

wie realisiere ich das mit Ajax? Die (aktive im Browser
geladene) Seite darf dazu nicht (wie mit PHP über den REQUEST)
reloadet werden. Deshalb Ajax. Ein Initialisierungsscript für
Ajax habe ich bereits.

Nur die Umsetzung meines Problemes und die Werteübergabe der
Select-Boxen fehlt mir noch. Ich habe es bisher nicht
geschafft die (wenigen verständlichen Tutorials im Netz) auf
mein Problem anzuwenden.

Vielen dank für die Hilfe.

[ingoloos]

Hallo Markus,

jQuery zu verstehen ist am Anfang auch nicht besonders einfach. Speziell die ajax-Geschichte braucht etwas Übung, bis man das mal kapiert hat.

• HTML:

wasserplanetenfeuerplaneten- JavaScript:

function planetenwahl() {

// Zuerst den Wert der ersten Selectbox laden
var planetenart = $("#ursprung").val();

// Jetzt den Request an die PHP stellen
$.ajax({
url : „planetenDatenbank.php“,
type : „post“,
data : „p=“+planetenart
}).done( function(data) {
// Den Rückgabestring auseinanderbauen
var optionValues = data.split(";");

// eventuell vorhandene Werte aus einer vorherigen Abfrage entfernen
$("#ziel").html("");

// Und für jeden Planeten einen entsprechenden Wert setzen
for (var i=0;i");
$("#ziel").append(’"’+werte[1]+’"’);
}
});

}

• PHP:

// hier die Datenbankverbindung aufbauen
$verbindung = …

// Daten aus Tabelle laden
$planet = $_POST[‚p‘];
$sql = sprintf(„SELECT k1, k1name FROM pta_k1 WHERE planet LIKE ‚%‘“,mysql_real_escape_string($planet));
$abfrage = mysql_query($sql, $verbindung);
while ($zeile = mysql_fetch_object($abfrage)) {
echo $zeile->k1."".$zeile->k1name;
}

Das müsste es eigentlich gewesen sein.

Grüße
Ingo