intelligentes Menü welche Sprache

[tutter]

Hallo an alle ich bemötige einen Denkanstoss oder ein paar Links damit ich weiß nach was ich suchen oder was ich mir anschauen muss.

Aktuell habe ich ein Menu welches wie folgt funktioniert.

Wenn man im Dropdownmenu Baum die Auswahl Laubbaum oder Nadelbaum wählt und aktualisieren klickt wird je nach dem in der Datenbank geschaut welche Nadelbäume oder Laubbäume (je nach auswahl) gibt. Nach einem erneuten klicken auf aktualisieren wird erneut in der datenbank geschaut welche Wert der gewählte Baumtyp und dessen Vertreter hat. zb. Ahorn (Details grüne Blätter usw.)

Ihr merkt es schon es nervt naturlich wenn das ganze Serverseitig immer über PHP läuft. Der Aktualisierungsbutton soll entfallen. Wenn im Dropdownmenu eine Auswähl gewählt wurde soll die Aktualisierung selbstständige gemacht werden.

Mit welcher Sprache kann ich das machen? Welche Sprache hilft mir hier weiter oder kann mir so jemand weiterhelfen?

danke schon mal vorab

[Gast]

versteh nix,sowas:
http://de.selfhtml.org/css/layouts/a..._dynamisch.htm

[tr0y]

Dropdowns können auf onChange reagieren. Lad die neuen Daten halt via AJAX und PHP nach.

[tutter]

danke Botschafter Sarek! das sieht erstmal sehr gut aus! genau das habe ich gesucht! hast du vielleicht noch ein komprimiertere Variante der Wissensbereitstellung sprich noch einen besseren Link zu dem Thema?

danke schon mal für eure mühen!

[tr0y]

- ajax via jquery onClick: http://matthiasschuetz.com/jquery-tu...mit-ajax-laden
- das onChange event mit jQuery: http://api.jquery.com/change/

ankh wedja seneb

[tutter]

also das onchange Event gefällt mir sehr gut ich kann schon farben ändern und solche Kleinigkeiten. Jedoch möchte ich nun meine bestehenden PHP Funktionen nutzen. Sprich, nach einem vorgegebenen DropDownmenu, mit der Bezeichnung Bäume, möchte ich bei Auswahl Nadelbäume, das er ein weiteres DropDownMenu anzeigt welches via PHP Abfrage an einem SQL Server den Inhalt dynamisch erstellt. Dieses Menu existiert schon, aber wie bekomme ich nun das erste Menu mit dem zweiten zusammen?

PS: ich dachte bei euch Vulkanier hieß es immer "lebe lang und in Frieden" *G*

[tr0y]

also das onchange Event gefällt mir sehr gut ich kann schon farben ändern und solche Kleinigkeiten. Jedoch möchte ich nun meine bestehenden PHP Funktionen nutzen. Sprich, nach einem vorgegebenen DropDownmenu, mit der Bezeichnung Bäume, möchte ich bei Auswahl Nadelbäume, das er ein weiteres DropDownMenu anzeigt welches via PHP Abfrage an einem SQL Server den Inhalt dynamisch erstellt. Dieses Menu existiert schon, aber wie bekomme ich nun das erste Menu mit dem zweiten zusammen?

PS: ich dachte bei euch Vulkanier hieß es immer "lebe lang und in Frieden" *G*

Das geht Client-Seitig nur mit Javascript, da quasi jede Auswahl aus Box 1 die Inhalte aus Box 2 verändert. PHP Seitig musst du dann entsprechende (JSON-)Daten liefern die du dann im onChange-Event-Callback in die Dropdown-Box einfügst nachdem du sie vorher geleert hast.

PS: http://en.wikipedia.org/wiki/Vulcan_salute

[tutter]

sorry das raffe ich überhaupt nicht! kann ich nicht einfach einen Event nutzen? sprich wenn mein onchange Event erfüllt ist dann gehe an stelle x im Skript und führe dies aus? oder anders gesagt - ich schnapp mir das zweite dropdownmenu, welches aktiviert ist durch den onChange Event erfüllt ist und lasse wie gewohnt dies die Arbeit machen. Dazu bräuchte ich doch nur ein Event der das PHP Skript aktiviert oder?

[monolith]

Ich glaub hier gibt's ein kleines Kommunikationsproblem.

Es geht doch darum Folgendes zu realisieren, oder nicht?
http://jsfiddle.net/pg0zwLn5/

Nun es gibt zwei Möglichkeiten:
Entweder werden direkt am Anfang der PHP alle relevanten Daten (alle Blatt- und Baumarten) in die Seite als JS-Code (oder irgendwo als reine Daten) eingebaut:

<?php
    echo "var laubarten = ['Laubbäume', 'Nadelbäume'];"; // (Natürlich nicht dann nicht hardgecodet)
    echo "var baumarten= [ ['Ahorn', 'Buche'], ['Kiefer', 'Tanne'] ];";
?>

Dann muss man kein AJAX (erneutes PHP) nutzen.
Oder man machts eben doch mit AJAX. Dann sinnvoll, wenn es um sehr viele/große Daten geht die man nicht alle "auf Verdacht" schon vorab in die Seite schaufeln will.

[tutter]

ja genau das war das ziel! ich könnte also mit einer SQL Abfrage erstmal alle Baumarten und alle Laubarten usw. mir bekannt machen. und dann mit JavaScript das ganze dynamisch variieren lassen. oder?

Denn das Ziel ist das ganze Dynamisch zu gestalten. Das heißt bei einem neuen Eintrag in der Datenbank muss dieser auch Nutzbar im Menu sein, also angezeigt werden.


Jedoch habe ich das Problem das irgendwann die Anzahl der Einträge in der Datenbank (werden ja nur ein Teil der Daten benötigt) zu hoch sein wird und dann muss ich doch zu AJAX greifen! gibt es hierfür ein Codeschnippsel an was ich mir was herleiten könnte oder muss ich da all zu tief in die Sprache rein um das zu realisieren?

danke für eure mühen!

[monolith]

ja genau das war das ziel! ich könnte also mit einer SQL Abfrage erstmal alle Baumarten und alle Laubarten usw. mir bekannt machen. und dann mit JavaScript das ganze dynamisch variieren lassen. oder?

Ja, richtig.

Jedoch habe ich das Problem das irgendwann die Anzahl der Einträge in der Datenbank (werden ja nur ein Teil der Daten benötigt) zu hoch sein

Genau, das ist der potenzielle Nachteil dieser Vorgehensweise.

und dann muss ich doch zu AJAX greifen!

Genau.

gibt es hierfür ein Codeschnippsel an was ich mir was herleiten könnte

Ja. Wie tr0y schon vorgeschlagen hat kann man das mit jQuery gut vereinfachen. Links dazu hat er bereitgestellt.

oder muss ich da all zu tief in die Sprache rein um das zu realisieren?

Nein, gar nicht. Mit jQuery wird das auf ein Minimum reduziert. Schau dir tr0ys Links an oder/und die Doku zu get(): http://api.jquery.com/jquery.get/ Wie man dort sieht kann man damit den JS-seitigen Teil zu einem Dreizeiler machen (in der Praxis ist möglicherweise zusätzlicher Code sinnvoll aber für die grundlegende Funktionalität genügen drei Zeilen.) Je nachdem wie deine PHP-App aufgebaut ist fällt auch dort gar kein Zusatzaufwand an.

[tutter]

ich schau es mir noch mal an (bin ja jetzt wieder schlauer als gestern *G*) muss zwar einiges umschreiben da ich mit post arbeite aber zum testen sollte es ja reichen.

Aber die frage die sich mir noch stellt ist wie bekomme ich den dein Skript zum laufen?

ich dachte ja an sowas aber damit kennt er im zweiten Drop Down menu natürlich nicht die Einträge aus dem JavaScript -Teil

<html>
<head>
<script>
    <!--
    $(document).ready(function () {
        $('select[name=laubart]').change(function () {
            switch ($(this).get(0).selectedIndex) {
                case 1:
                    $('select[name=baumart]').html('<option>Ahorn</option><option>Buche</option>');
                    break;
                case 2:
                    $('select[name=baumart]').html('<option>Kiefer</option><option>Tanne</option>');
                    break;
                default:
                    $('select[name=baumart]').html('<option value="">-</option>');
            }
        });
    });
    //-->
</script>    

<title>Select-TEST</title>

</head>

<body>

<form>
    <label>Laubart:</label>
    <select name="laubart">
        <option value="">-</option>
        <option value="1">Laubbaum</option>
        <option value="2">Nadelbaum</option>
    </select>
    <label>Baumart:</label>
    <select name="baumart">
        <option value="">-</option>
    </select>
</form>


</body>
</html> 

[monolith]

Hast du jQuery eingebunden?

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

[Gast]

nicht google, monolith; nicht immer und überall nach google telephonieren....

<script src="https://code.jquery.com/jquery-2.1.1.min.js" />

[hausl]

<script src="//code.jquery.com/jquery-2.1.1.min.js" />

Sollte man das Protokoll nicht besser weglassen? Hab ich mal wo gelesen, glaub ich