Ajax und Select und Vorgabewerte

  • Ajax und Select und Vorgabewerte

    Hallo ihr

    Ich hab mal wieder ein Ajax-Problem...

    Also, ich hab ein Formular mit diversen Select-Feldern, die per MySQL gefüllt werden. Da zwei Select-Felder voneinander abhängig sind, lade ich den Inhalt der zweiten Dropdown-Liste per Ajax nach (mit Hilfe der Anleitung "Ajax Inhalte mit PHP & Select nachladen").

    Beispiel:
    Select-Feld 1: Hauptkategorie mit Werten Menschen, Tiere, Natur
    Select-Feld 2: Unterkategorie mit Werten abhängig von Select-Feld 1, z.B. Freunde, Family, Fremde...

    Das klappt auch alles wunderbar.

    Nun möchte ich mein Script gern so anpassen, dass wenn ich das Formular für einen bestimmten Datensatz meiner Datenbank-Tabelle öffne, die entsprechenden Werte in den Select-Feldern bereits gewählt (selected) sind.

    Beispiel: Formular wird für ID 20 geladen. In diesem Datensatz ist Hauptkategorie = Menschen und Unterkategorie = Family. Im Select-Feld Hauptkategorie sollte demnach der Eintrag "Menschen" selected sein, ausserdem sollte bereits das Select-Feld Unterkategorie sichtbar sein mit dem selektierten Eintrag "Family".

    Wenn ich als Benutzer des Formulars nun aber diese Einträge ändern möchte, sollte ich nicht nur eine andere Unterkategorie von "Menschen" wählen, sondern auch die Hauptkategorie ändern können und natürlich müsste die Anzeige im Unterkategorie-Feld dann entsprechend aktualisiert werden.

    Mir ist klar, wie ich die Inhalte nachladen kann und mir ist klar, wie ich aus der Datenbank auslesen kann, welcher Eintrag selected sein muss. Aber ich hab keine Ahnung, wie ich diese beiden Dinge irgendwie vereinen könnte...

    Hier ist mal mein Code:

    Quellcode

    1. <html><head>
    2. <title>Formular</title>
    3. <script type="text/Javascript">
    4. <!--
    5. function sendRequest() {
    6. try {
    7. req = window.XMLHttpRequest?new XMLHttpRequest():
    8. new ActiveXObject("Microsoft.XMLHTTP");
    9. } catch (e) {
    10. //Kein AJAX Support
    11. }
    13. req.onreadystatechange = handleResponse;
    14. id = document.getElementById('hauptkat').value;
    15. req.open('get', 'unterkat.php?s='+ id);
    16. req.send(null);
    17. }
    19. function handleResponse() {
    20. if ((req.readyState == 4) && (req.status == 200)) {
    21. document.getElementById('inhalt_unterkat').innerHTML = req.responseText;
    22. }
    23. }
    24. //-->
    25. </script>
    27. </head>
    28. <body>
    29. <?
    30. include 'connect.php';
    31. $query_hauptkat = "select hauptkatID, hauptkat from hauptkat order by hauptkat";
    32. $result_hauptkat = mysql_query($query_hauptkat);
    33. ?>
    35. <select id="hauptkat" name="hauptkat" onChange="sendRequest()"><?
    36. while($row = mysql_fetch_object($result_hauptkat))
    37. {
    38. echo "<option value='".$row->hauptkatID."'>".$row->hauptkat."</option>";
    39. }
    40. ?>
    41. </select>
    42. &nbsp;
    43. <div id="inhalt_unterkat"></div>
    44. </body></html>
    Alles anzeigen



    Und dann noch unterkat.php:

    Quellcode

    1. <?
    2. include 'connect.php';
    4. //Inhalte laden
    5. $query_unterkat = "select unterkatID, unterkat from unterkat where hauptkatF = ".mysql_escape_string($_GET['s'])." order by unterkat";
    6. $result_unterkat = mysql_query($query_unterkat);
    7. ?>
    8. <select name="unterkat">
    9. <?
    10. while($row = mysql_fetch_object($result_unterkat))
    11. {
    12. echo '<option value="'.$row->unterkatID.'">'.$row->unterkat.'</option>';
    13. }
    14. ?>
    15. </select>
    Alles anzeigen




    Und dies ist der Code, um bei den beiden Listen jenen Dropdown-Wert zu selektieren, der in der Datenbank gewählt ist, allerdings eben ohne implementiertes Ajax...

    Quellcode

    1. <?
    2. $query = "select datei.dateiID, datei.hauptkatF, datei.unterkatF, hauptkat.hauptkat, unterkat.unterkat
    3. from datei
    4. left join hauptkat on datei.hauptkatF = hauptkat.hauptkatID
    5. left join unterkat on datei.unterkatF = unterkat.unterkatID
    6. where dateiID = $id";
    8. $result = mysql_query($query);
    9. if (mysql_num_rows($result))
    10. {
    11. while ($res = mysql_fetch_array($result))
    12. {
    13. $hauptkat_sel = $res["hauptkatF"];
    14. $unterkat_sel = $res["unterkatF"];
    15. }
    16. }
    18. $query_hauptkat = "select hauptkatID, hauptkat from hauptkat order by hauptkat";
    19. $result_hauptkat = safe_query($query_hauptkat);
    20. ?>
    21. <form name="fupload" method="post" action="index.php">
    22. <select id="upload_hauptkat" name="upload_hauptkat"><?
    23. if ($hauptkat_sel == NULL) { echo "<option value='0' selected></option>"; }
    24. else { echo "<option value='0'></option>"; }
    25. while($row = mysql_fetch_object($result_hauptkat))
    26. {
    27. if ($row->hauptkatID == $hauptkat_sel) { echo "<option value='".$row->hauptkatID."' selected>".$row->hauptkat."</option>"; }
    28. else { echo "<option value='".$row->hauptkatID."'>".$row->hauptkat."</option>"; }
    29. }
    30. ?>
    31. </select>
    32. &nbsp;
    33. <select name="upload_unterkat"><?
    34. $query_unterkat = "select unterkatID, unterkat from unterkat where hauptkatF = $hauptkat_sel order by unterkat";
    35. $result_unterkat = mysql_query($query_unterkat);
    36. if ($unterkat_sel == NULL) { echo "<option value='0' selected></option>"; }
    37. else { echo "<option value='0'></option>"; }
    38. while($row = mysql_fetch_object($result_unterkat))
    39. {
    40. if ($row->unterkatID == $unterkat_sel) { echo "<option value='".$row->unterkatID."' selected>".$row->unterkat."</option>"; }
    41. else { echo "<option value='".$row->unterkatID."'>".$row->unterkat."</option>"; }
    42. }
    43. ?>
    44. </select>
    45. </form>
    Alles anzeigen


    Tja, ich hab keine Ahnung, wie ich jetzt beides zusammenführen könnte... Ich bin bisher bei sämtlichen Versuchen gescheitert. Da ich inzwischen etwa 20 verschiedene Versionen habe, verzichte ich jetzt mal darauf, noch mehr Code zu posten. Ich hoffe sehr, dass mir jemand auf die Sprünge helfen kann...

    Vielen Dank, schöne Weihnachten und liebe Grüsse
    Michele

  • Hi,
    ohne mich jetzt zu sehr auf den Code zu versteifen - hier meine Ideen:
    Die Hauptkategorie füllst du immer mit PHP und MySQL. Das ist soweit in Ordnung.
    Die Unterkategorien befüllst du mit AJAX in Abhängigkeit von der Auswahl der Hauptkategorie. Das funktioniert auch wunderbar.

    Das funktioniert also. Und an diesem Punkt machst du Stop.
    Denn viel ist ab dem Zeitpunkt nicht mehr zu ändern!

    Punkt 1: Jetzt willst du also eine Vorselektierung erreichen.
    Das machst du ganz normal wie man es von HTML (bzw. PHP & MySQL) gewohnt ist mit "selected"

    Quellcode

    1. <select name="Auswahl">
    2. <option>Chemnitz</option>
    3. <option selected="selected">Essen</option>
    4. <option>Hamburg</option>
    5. </select>


    Punkt 2:
    Und jetzt brauchst du nur noch die AJAX Funktion beim Laden der Seite aufzurufen.
    Am besten mit

    Quellcode

    1. <body onload="sendRequest()">


    Macht schließlich keinen Unterschied, ob du den Event mit einem "Klick" oder automatisch beim Laden aufrust.

  • hi donut

    herzlichen dank für deine wieder mal extrem schnelle antwort! mir hat der tipp, den funktionsaufruf in den body-tag zu packen, sehr geholfen. und nach einigen schwierigkeiten mit der übergabe von variablen zw. javascript und php läuft jetzt endlich alles perfekt! :D

    nur eins will noch nicht so, wie ich es gern möchte: die zweite selectbox wird nun plötzlich unterhalb der ersten selectbox angezeigt und nicht mehr daneben, wie es eigentlich sein sollte... keine ahnung warum. aber naja, hauptsache, die funktionalität ist 1A.

    also nochmals vielen dank!
    lg, michele