Ajax mit Select auswahl

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Ajax mit Select auswahl

    hallo nach vielem Lesen und schaun habe ich das Forum hier gefunden und muss sagen hier ist ein super umgang auch bei Neulingen und den vielen fragen -g- Daher hab ich mich mal angemeldet und muss auch was fragen.

    Und zwar habe ich zum Thema mit der Select box viel gelesen das beste ist: [wiki]Select-Auswahl mit AJAX Abhängigkeit[/wiki]

    Jedoch bin ich noch recht am anfang mit Ajax, verstehe zwar einige abläufe aber dennoch hängt es. PHP und MYSQL sind vorhanden.

    Zu meiner Frage :D

    Also ich will eine Select Box anbieten die daten sollen aus einer DB kommen (1Box )

    Länder auswahl (Diese 3 länder sind in der DB)
    *Deustchland (ID1)
    *Schweiz(ID2)
    *Österreich(ID3)

    Je nach auswahl Soll wiederum eine 2 Box auftauchen wo neue daten ausgelesen werden aus der DB (jedes bundesland hat eine land id)

    Bundersländer:
    *Niedersachen (ID1 / landid1)
    *Bayern (ID2 / landid1)
    *Zürrich ((ID3 / landid2))

    Dann wiederum soll noch eine box kommen mit den Städten wo dann in der DB bei städten die Bundesland id dabei ist)

    Hoffe man versteht mich einigermassen. Sry wenn ich mich schlecht ausdrücken sollte, weis nur nicht wie ich das beschreiben soll sonst.
    Zumindest sind die ansätze die ich hier gesehen habe ja schon das was ich will komme aber jedoch einfach nicht vorran oder weis nicht wie ich das umsetzen soll =(
    ...

    Hab mal was ausprobiert aber irgendendwie passiert nix wenn ich eins auswähle...Die erste Box zeigt er normal an aber soweit ich was auswähle gehts nicht weiter.
    formular.php

    Quellcode

    1. <html><head>
    3. <script type="text/Javascript">
    4. function createXMLHttpRequest() {
    6. var ua;
    8. if(window.XMLHttpRequest) {
    9. try {
    10. ua = new XMLHttpRequest();
    11. } catch(e) {
    12. ua = false;
    13. }
    14. } else if(window.ActiveXObject) {
    15. try {
    16. ua = new ActiveXObject("Microsoft.XMLHTTP");
    17. } catch(e) {
    18. ua = false;
    19. }
    20. }
    21. return ua;
    22. }
    24. var req = createXMLHttpRequest();
    26. function sendRequest(digit) {
    27. // **
    28. // Hier die wichtigen Änderungen. Quelle und Ziel übermitteln
    29. // **
    30. minus = digit-1;
    31. inhalt = document.getElementById('source' + minus );
    32. req.open('get', 'func.php?dest='+ digit + '&s=' + inhalt.value);
    33. req.onreadystatechange = handleResponse;
    34. req.send(null);
    35. }
    37. function handleResponse() {
    39. if(req.readyState == 4){
    40. var response = req.responseText;
    41. var update = new Array();
    43. if(response.indexOf('||' != -1)) {
    44. update = response.split('||');
    45. document.getElementById(update[0]).innerHTML = update[1];
    46. }
    47. }
    48. else
    49. alert("loading" + ajax.readyState);
    50. }</script>
    53. </head>
    54. <body>
    56. <form method="post" action="">
    57. <div style="float:left" id="select1">
    58. <select name="source1" id="source1" onChange="sendRequest(2)">
    59. <option value=""></option>
    60. <?
    61. //CAT = 0 könntest du verwenden um dein hauptmenü zu kennzeichnen
    62. $res = mysql_query("SELECT id, name FROM `land`");
    63. while($row = mysql_fetch_object($res)) {
    64. echo '<option value="'.$row->id.'">'.$row->name.'</option>';
    65. }
    66. ?>
    67. </select>
    68. </div>
    70. <div style="float:left" id="select2" name="select2">
    71. </div>
    72. </form>
    74. </body></html>
    Alles anzeigen

    func.php

    Quellcode

    1. echo 'select'.$_GET['dest'].'|| ';
    3. echo '<select name="source'.$_GET['dest'].'" id="source'.$_GET['dest'].'">';
    4. echo '<option value=""></option>';
    6. //if(!is_int($_GET['s']))
    7. // die('hacking_attempt');
    10. $res = mysql_query("SELECT id, name FROM `bundesland` WHERE `land_id` = ".$_GET['s']."");
    11. while($row = mysql_fetch_object($res)) {
    12. echo '<option value="'.$row->id.'">'.$row->name.'</option>';
    13. }
    14. echo '</select>';
    Alles anzeigen

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

  • Guten morgen,

    hmm... dein Code sieht sehr nach meinem alten Wiki Eintrag von mir aus, aber passt nicht zu dem Code den ich hier veröffentlicht habe.
    Ich würde dir empfehlen die download.zip des Beispiels herunterzuladen.

    Das einzige was du anpassen musst, ist folgende ajax.php zu verwenden:

    Quellcode

    1. $data = array();
    2. $res = mysql_query("SELECT id, name AS text FROM `bundesland` WHERE `land_id` = ".mysql_real_escape_string($_GET['id'])."");
    3. while($row = mysql_fetch_object($res)) {
    4. $data[] = $row;
    5. }
    7. echo json_encode($return);

  • Ok habe soweit alles gemacht was gesagt hast! vielen dank erstma ^^.
    1BOX (Land)

    Quellcode

    1. $data = array();
    2. $res = mysql_query("SELECT id, name AS text FROM `land`");
    3. while($row = mysql_fetch_object($res))
    4. {
    5. $data[] = $row;
    6. }
    7. echo json_encode($data);

    Eingebaut und dein beispiel genutzt. Soweit wird nun auch angezeigt und soweit ich drauf gehe kommt auch ne 2 Box dann 3 usw...
    das problem ständig mit den gleichen sachen imemr die länder.
    Nun wie kann ich ihn sagen das er bei der nächsten box ne andere tabelle nehmen soll?

    2BOX (bundesland / "Land_id")
    3BOX (stadt / "bundesland_id")

  • Selbstverständlich. habe das Beispiel aus dem Wiki genommen.

    Index.php

    HTML-Quellcode

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" xml:lang="de">
    3. <head>
    4. <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    5. <title>test</title>
    6. <script type="text/javascript" src="script.js"></script>
    7. <style type="text/css">
    8. <!--
    10. body{font-size:11pt;font-family:Verdana,Arial,Sans}
    11. //-->
    12. </style>
    13. </head>
    14. <body onload="sendRequest(null, 'elem1')">
    16. <form method="post" action="" id="ajaxSelect">
    18. <table>
    19. <tr id="elem1" style="display:none">
    20. <td>Land:</td>
    21. <td><select name="land" size="4" onchange="sendRequest(this, 'elem2')"><option value=""></option></select></td>
    22. </tr>
    23. <tr id="elem2" style="display:none">
    24. <td>Bundesland:</td>
    25. <td><select name="bland" size="4" onchange="sendRequest(this, 'elem3')"><option value=""></option></select></td>
    26. </tr>
    27. <tr id="elem3" style="display:none">
    28. <td>Stadt:</td>
    29. <td><select name="stadt" size="4" onchange="sendRequest(this, 'elem4')"><option value=""></option></select></td>
    30. </tr>
    31. </table>
    33. <div>
    34. <input type="submit" />
    35. </div>
    36. </form>
    38. </body></html>
    Alles anzeigen

    ajax.php

    PHP-Quellcode

    1. <?php
    2. include('db.php');
    5. $data = array();
    6. $res = mysql_query("SELECT id, name AS text FROM `land`");
    7. while($row = mysql_fetch_object($res))
    8. {
    9. $data[] = $row;
    10. }
    11. echo json_encode($data);
    12. ?>
    Alles anzeigen

    script.js

    Quellcode

    1. function clearSelect(targetSel) {
    2. for (var i=targetSel.length; i>=0; i--) {
    3. targetSel.options[i] = null;
    4. }
    5. }
    6. function sendRequest(domref, target) {
    8. if(!target) return false;
    11. if(domref) domref.followup = target;
    13. var req;
    14. try {
    15. req = window.XMLHttpRequest ? new XMLHttpRequest():
    16. new ActiveXObject("Microsoft.XMLHTTP");
    17. } catch (e) {
    19. }
    20. req.onreadystatechange = function() {
    21. if ((req.readyState == 4) && (req.status == 200)) {
    23. var data = eval('(' + req.responseText + ')');
    24. var targetRef = document.getElementById(target);
    25. var targetSel = targetRef.getElementsByTagName('select')[0];
    28. targetRef.style.display = 'block';
    31. clearSelect(targetSel);
    33. var i = 0;
    34. for(var x in data) {
    35. targetSel.options[i++] = new Option(
    36. data[x].text,
    37. data[x].id
    38. );
    39. }
    42. while(targetSel.followup) {
    43. targetRef = document.getElementById(targetSel.followup);
    46. targetRef.style.display = 'none';
    48. targetSel = targetRef.getElementsByTagName('select')[0];
    51. clearSelect(targetSel);
    52. }
    53. }
    54. }
    56. req.open('post', 'ajax.php');
    57. req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    60. req.send(domref !== null ? 'id='+domref.value+'&name='+domref.name : '');
    62. return false;
    63. }
    Alles anzeigen

  • du könntest mit js prüfen, welches target ausgewählt wurde und dementsprechend die ajaxrequest verändern:

    Quellcode

    1. switch(target) {
    2. case elem1:
    3. str="foo";
    4. break;
    5. case elem2:
    6. str="Land_id";
    7. break;
    8. case elem3:
    9. str="bundesland_id";
    10. break;
    11. }
    12. req.send(domref !== null ? 'id='+domref.value+'&name='+domref.name+'&target='+str : '');
    Alles anzeigen

    Dann müsste die Abfrage so umgewandelt werden:

    Quellcode

    1. $res = mysql_query("SELECT id, name AS text FROM `{$_REQUEST['target']}`");
    Open Source --> Programmieren aus Leidenschaft :!:

    Ich stehe weder für privaten Support per PM noch über einen IM zur Verfügung. Danke.

  • So habe das js mal angepasst musste aber die case in "" setzen da er sonst fehler anzeigt in der Konsole und die Boxen garnicht erst auftauchen.

    Quellcode

    1. switch(target) {
    2. case "elem1":
    3. str="land";
    4. break;
    5. case "elem2":
    6. str="bundesland";
    7. break;
    8. case "elem3":
    9. str="stadt";
    10. break;
    11. }
    12. req.send(domref !== null ? 'id='+domref.value+'&name='+domref.name+'&target='+str : '');
    Alles anzeigen


    Optisch scheint soweit auch alles zu gehen habe auch mit alert() getestet ob er den switch nimmt (alles ok).
    Jedoch glaube ich (weis nicht genau) in der ajax.php kommt der target nicht an oder wird nicht verarbeitet ...
    kann es aber nicht genau sagen. Auf jedenfall gibt er mir nix in die Box aus.

    Quellcode

    1. $data = array();
    2. $res = mysql_query("SELECT id, name AS text FROM `{$_REQUEST['target']}`");
    3. while($row = mysql_fetch_object($res))
    4. {
    5. $data[] = $row;
    6. }
    7. echo json_encode($data);

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

  • Lass dir mal bitte den Inhalt von target und sonstiger Variablen mittels

    Quellcode

    1. var_dump($_POST)

    oder

    Quellcode

    1. var_dump($_REQUEST)

    ausgeben und poste die Ausgabe hier ins Forum.

    Und wie sieht denn deine Tabellenstruktur aus? Wenn ich das richtig sehe, dann weicht sie vom Wikibeispiel ab. Gibt es für jede neue Box eine eigene Tabelle?
    Open Source --> Programmieren aus Leidenschaft :!:

    Ich stehe weder für privaten Support per PM noch über einen IM zur Verfügung. Danke.

  • bei zb.:

    var_dump($_REQUEST['target']) so wie POST gibt er "NULL" aus.
    An DB sollte es nicht liegen wenn ich zb.:
    land direkt nach From angebe geht es ja, aber so:
    $res = mysql_query("SELECT id, name AS text FROM `{$_REQUEST['target']}`");
    Will er nicht.

    DB ist folgendermassen aufgebaut:
    Tabelle "land":
    id
    name

    Tabelle "bundesland":
    id
    land_id
    name

    Tabelle "stadt":
    id
    bundesland_id
    name

    Aber wie gesagt wenn ich nach From es direkt angebe geht es...

  • schade...

    ...ich bekomms trotzdem nicht hin... Jetzt hab ich endlich nach ewiger Recherche eine scheinbar deppensichere Anleitung gefunden, und ich schaffs immer noch nicht. Dabei ist euer Projekt genau das, was ich gerne auf meiner Seite einbinden möchte. Auch drei select-Felder, auch aus einer DB, nur keine Städte und Länder sondern Werkstoffe usw.
    Hab mir schon die DB zusammengebastelt die sintains benutzt damit alles passt. Die DB-Abfrage hab ich noch hinbekommen, aber dann nur noch... na ja, nix mehr :)
    Natürlich weiß ich auch, woran es liegt, meine Kenntnisse sind für sowas nicht, na sagen wir mal "gereift". Die Änderungen und Korrekturen, die ihr besprochen habt, wusste ich teilweise nicht einmal, wo sie hingehören (besonders in der script.js)... Ist zum verzweifeln...
    Ich weiß, es ist unverschämt, aber die letztgültigen funktionierenden Skripte würden mein Weihnachtsfest versüßen! Wenn ich könnte, würde ich mich ja gerne revangieren, aber meine bisherigen "Programmierkünste" fallen derweil noch unter "ferner liefen...".

    Wünsche euch ein schönes Weihnachtsfest (mir auch :) )

  • noch eine kurze Frage...

    Hab mit eurer Hilfe die verketteten selects in meine Umgebung einbetten können, Danke!
    Beim Herumexperimentieren stellt sich mir jetzt eine Frage. Ich hab aus optischen Gründen die select-box size auf "1" gesetzt. Nun lässt sich der oberste Wert nicht anwählen. Nur nach vorherigem Anwählen eines anderen Wertes.
    Ein ("bitte wählen" oder so ähnlich) für "value" als ersten Wert im Form einzusetzen hat erwartungsgemäß nichts gebracht. Hat jemand eine Idee wo ich da am besten ansetzen kann?