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

  • 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

    PHP-Quellcode

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml">
    3. <head>
    4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    5. <title>Testseite zum nachladen von Dynamischen Inhalten</title>
    7. <script type="text/javascript">
    9. <!--
    11. function sendRequest(client) {
    12. if (client==1)
    13. {
    14. var req;
    16. try {
    18. req = window.XMLHttpRequest?new XMLHttpRequest():
    20. new ActiveXObject("Microsoft.XMLHTTP");
    22. } catch (e) {
    24. //Kein AJAX Support
    26. }
    30. req.onreadystatechange = function() {
    31. if ((req.readyState == 4) && (req.status == 200)) {
    33. document.getElementById('inhalt').innerHTML = req.responseText;
    34. }
    36. };
    37. var id = document.getElementById('dropdown').value;
    38. req.open('post', 'func.php');
    39. req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    40. req.send('s='+id);
    41. }
    42. if (client==2)
    43. {
    44. var req;
    46. try {
    48. req = window.XMLHttpRequest?new XMLHttpRequest():
    50. new ActiveXObject("Microsoft.XMLHTTP");
    52. } catch (e) {
    54. //Kein AJAX Support
    56. }
    60. req.onreadystatechange = function() {
    61. if ((req.readyState == 4) && (req.status == 200)) {
    63. document.getElementBy('inhalt').innerHTML = req.responseText;
    64. }
    66. };
    67. var id = document.getElementById('dropdown2').value;
    68. req.open('post', 'func.php');
    69. req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    70. req.send('s='+ id);
    72. }
    73. }
    75. //-->
    76. </script>
    77. </head>
    78. <body>
    80. <p />Wählen Sie einen Eintrag aus um den Inhalt zu laden
    81. <p /><select id="dropdown" onChange="sendRequest(1)">
    82. <?php
    83. include 'connect.php';
    84. $connection = mysqli_connect($host,$user,$password,$db) or die("Die Verbindung konnte nicht hergestellt werden.");
    85. if($connection)
    86. {
    87. $Status = "Verbindung hergestellt";
    89. }
    91. $sql = "SELECT manufacturer,manufacturer_name FROM `hsn_tsn`; ";
    92. $result = mysqli_query($connection,$sql);
    94. while($row = mysqli_fetch_object($result))
    95. {
    96. echo '<option value="' . $row->manufacturer . '">' . $row->manufacturer_name . '</option>';
    97. }
    99. ?>
    100. </select>
    102. <div id="inhalt"></div>
    103. </body>
    104. </html>
    Alles anzeigen


    Und nach diesem Code hier

    PHP-Quellcode

    1. <p /><select id="dropdown" onChange="sendRequest(1)">
    2. <?php
    3. include 'connect.php';
    4. $connection = mysqli_connect($host,$user,$password,$db) or die("Die Verbindung konnte nicht hergestellt werden.");
    5. if($connection)
    6. {
    7. $Status = "Verbindung hergestellt";
    9. }
    11. $sql = "SELECT manufacturer,manufacturer_name FROM `hsn_tsn`; ";
    12. $result = mysqli_query($connection,$sql);
    14. while($row = mysqli_fetch_object($result))
    15. {
    16. echo '<option value="' . $row->manufacturer . '">' . $row->manufacturer_name . '</option>';
    17. }
    19. ?>
    20. </select>
    Alles anzeigen



    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

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von zapp ()

  • 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.

  • 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.. :(

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

    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.