AJAX mehrere Selects und Zurücksetzen

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

  • AJAX mehrere Selects und Zurücksetzen

    Gesplittet von http://www.easy-coding.de/ajax-sql-2-select-felder-t884.html
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

    Super skript, wär genau das was ich seit Tagen suche...
    Nur leider erscheint bei mir keine 2te Tabelle sondern die Daten die in der func.php aus der DB gelesen werden, werden einfach nur nacheinander rausgeEcho't...
    Hab das Skript 1zu 1 übernommen bis auf die Sql-Sachen halt...

    Hatte das Problem schon jmd bzw weiß jmd woran das liegen kann?

    kann meine func.php ja mal hier posten...

    Quellcode

    1. <?
    2. //db connect
    3. require('includes/connect.php');
    5. echo '<selct name="bundesland">';
    7. $categories_query2 = tep_db_query("select a.categories_id,parent_id, b.categories_name from " . TABLE_CATEGORIES . " as a," . TABLE_CATEGORIES_DESCRIPTION . " as b where parent_id = '".$_GET[s]."' order by categories_name");
    9. while($row = mysql_fetch_object($categories_query2))
    10. {
    11. echo '<option value="'.$row->categories_id.'">'.$row->categories_name.'</option>';
    12. }
    13. echo '</select>';
    14. ?>
    Alles anzeigen


    und der veränderte Teil aus der Hauptphp:

    Quellcode

    1. <p />Wählen Sie einen Eintrag aus um den Inhalt zu laden
    3. <p /><select id="dropdown" onChange="sendRequest()">
    4. <?
    7. $categories_query = mysql_query("select a.categories_id,parent_id, b.categories_name from " . TABLE_CATEGORIES . " as a," . TABLE_CATEGORIES_DESCRIPTION . " as b where a.categories_id = b.categories_id and parent_id ='0' and b.language_id = " . (int)$language_id . " order by categories_name");
    8. while($row = mysql_fetch_object($categories_query ))
    9. {
    10. echo '<option value="'.$row->categories_id.'">'.$row->categories_name.'</option>';
    11. }
    12. ?>
    13. </select>
    15. <div id="select2"></div>
    17. </body></html>
    Alles anzeigen


    Wie gesagt, dachte eigentlich, dass ich ncihts ausser die sql Sachen verändert hatt aber die funktionieren eigentlich...
    Bin etwas ratlos was das sein könnte!

  • "student2312" schrieb:

    Nur leider erscheint bei mir keine 2te Tabelle sondern die Daten die in der func.php aus der DB gelesen werden, werden einfach nur nacheinander rausgeEcho't...


    wie meinst du denn rausgeechot?
    wird der inhalt einfach nur ohne html layout innerhalb des <div id="select2"> ausgegeben?

    erstell doch mal einen rahmen um zu sehen obs innerhalb/außerhalb der box ist

    Quellcode

    1. <div id="select2" style="border:1px solid #afafaf">


    ansonsten debugge ich immer gerne mit alert
    gib doch mal in der handleResponse den Rückgabewert aus

    Quellcode

    1. alert(req.responseText);


    vermutlich eine große ausgabe - aber manchmal hilfts

  • :lol: Sry, mit rausgeEcho't meinte ich, dass alle nur nacheinander ausgegeben werden ohne dropdown sondern einfach nur die Sql ergebnisse in Textform.
    Hab das mit der border mal gemacht, dann zieht er um die sql ergebnisse den Rahmen, also es kommt schon an, aber nicht als Dropdown...
    komischerweise wenn ich, wie du meintest ,mit alert den responseText ausgeb ist der:
    <select name="bundeslans"><option value="41">beschreibung</option></select>
    also müsste doch schon stimmen :?

  • Ok kann ich machen, danke, dass du dir die Zeit nimmst!

    erstmal die add.php wo der hauptteil drin ist:

    Quellcode

    1. <html><head>
    2. <title>AJAX PHP Beispiel mit Select</title>
    4. <script type="text/Javascript">
    5. <!--
    6. function sendRequest() {
    7. try {
    8. req = window.XMLHttpRequest?new XMLHttpRequest():
    9. new ActiveXObject("Microsoft.XMLHTTP");
    10. } catch (e) {
    11. //Kein AJAX Support
    12. }
    14. req.onreadystatechange = handleResponse;
    15. id = document.getElementById('dropdown').value;
    16. req.open('get', 'func.php?s='+ id);
    17. req.send(null);
    18. }
    20. function handleResponse() {
    21. if ((req.readyState == 4) && (req.status == 200)) {
    22. document.getElementById('select2').innerHTML = req.responseText;
    23. alert(req.responseText);
    24. }
    25. }
    26. //-->
    27. </script>
    29. </head>
    30. <body>
    32. <p />Wählen Sie einen Eintrag aus um den Inhalt zu laden
    34. <p /><select id="dropdown" onChange="sendRequest()">
    35. <?
    38. $categories_query = mysql_query("select a.categories_id,parent_id, b.categories_name from " . TABLE_CATEGORIES . " as a," . TABLE_CATEGORIES_DESCRIPTION . " as b where a.categories_id = b.categories_id and parent_id ='0' and b.language_id = " . (int)$language_id . " order by categories_name");
    39. while($row = mysql_fetch_object($categories_query ))
    40. {
    41. echo '<option value="'.$row->categories_id.'">'.$row->categories_name.'</option>';
    42. }
    43. ?>
    44. </select>
    46. <div id="select2" style="border:1px solid #afafaf"></div>
    48. </body></html>
    Alles anzeigen

    Und dann die func.php:

    Quellcode

    1. <?
    2. require('includes/application_top.php');
    3. echo '<selct name="bundesland">';
    5. $categories_query2 = mysql_query("select categories_id,parent_id from " . TABLE_CATEGORIES ." where parent_id = '".$_GET[s]."'");
    7. while($row = mysql_fetch_object($categories_query2))
    8. {
    9. echo '<option value="'.$row->categories_id.'">'.$row->parent_id.'</option>';
    10. }
    11. echo '</select>';
    12. ?>
    Alles anzeigen

    hab noch ein paar Sachen ausprobiert, aber immer mit dem gleichen Ergebniss: keine dropdown...

    greets

    edit:
    ok also am sql liegt es ziemlich sicher nicht, denn wenn ich der zweiten Box die id="dropdown" gebe, wie die der ersten, lädt er die Daten aus func.php ohne Probleme in die erste dorpDown Box rein...

    edit2:
    Huuuui, eine 2te ist erschienen, funktioniert auch soweit...
    Hab statt <div id="select2"...</div> <select id="select2"...</select> eingebaut und dann das <select>,</select> aus der func.php auskommentiert...
    Weiß jetzt nicht ob das irgendwelche Probleme aufwirft im Nachhinein :?
    Vor allem weil da noch mehr Drop Down Boxen hinterher sollen...
    Will versuchen das er die maximale Tiefe der auf meiner Seite vorhandenen Unterkategorien ausliest und dann
    Mit eine For-Schleife soviele Drop Downs einzubauen, wie es Unterkategorien gibt, und man jeweils eine Kategorie auswählen kann und dann in der nächsten alle U-Kategorien erscheinen...
    Aber dass versuch ich erstmal selbst, will hier ja nicht euer Forum zu-spammen :wink:

    Wenns noch Bedenken, wegen der Select Lösung gibt bitte sagen, ansonsten versuch ich mich mal mit der Schleife...

    Achso, und wenn hier schonmal so ein ähnliches Script irgendwo gepostet wurde, würde ich mich natürlich dort schon inspirieren lassen, aber hab auf den ersten Blick noch nichts in die Richtung gesehen!

  • Danke, aber hab mich doch spontan zu einer einzelnen Box umentschieden, weil ich zuerst 7 DropDowns untereinander hatte, was zwar funktioniert hat aber irgendwie nicht so toll aussah...
    Habs jetzt fast so hinbekommen, wie ichs geplant hatte doch ein paar Sachen hab ich nicht gewusst und nicht in Google oder selfthtml gefunden...
    Vielleicht kann mir ja jmd ein bisschen auf die Sprünge helfen...
    Muss leider den kompletten text posten, weil die Probleme etwas verteilt sind
    :roll:

    also erstmal die hauptphp:

    Quellcode

    1. <tr>
    2. <td>
    3. <html><head>
    4. <script type="text/Javascript">
    5. <!--
    6. function sendRequest(a) {
    8. try {
    9. req = window.XMLHttpRequest?new XMLHttpRequest():
    10. new ActiveXObject("Microsoft.XMLHTTP");
    11. } catch (e) {
    12. //Kein AJAX Support
    13. }
    16. req.onreadystatechange = handleResponse;
    17. id = document.getElementById(a).value;
    18. req.open('get', 'func.php?s='+ id);
    19. req.send(null);
    21. /*<problem1> Will es so machen, dass wenn man eine kategorie auswählt über der
    22. DropDownBox die ausgewählte Kategorie aufgeführt wird, bis jetzt noch mit Id...
    23. document.getElementById(a).options[id].text; geht leider nicht, wär aber auch zu einfach...</problem1>*/
    25. vorher = document.getElementById('Auswahl').innerHTML;
    27. document.getElementById('Auswahl').innerHTML = vorher+" --> "+id;
    30. document.getElementById(a).style.backgroundColor = "#afafaf";
    31. document.getElementById(a).style.Color = "#adadad";
    33. // <Problem 2>Hier soll während er auf die Response wartet kurz der Text
    34. //"wird geladen" oder einfach kein Text kommen, weil im Moment noch
    35. //die ausgewählte Option stehen bleibt...
    37. document.getElementById(id).text = "wird geladen...";
    38. //</problem 2>
    39. }
    42. /*<problem 3 > Hier ist die Funktion, falls jemand die "Zurück" Option wählt, weil
    43. da ja nicht nochmal der Pfad mit document.getElementById('Auswahl').innerHTML =
    44. vorher+" --> "+id; angefügt werden soll sondern lediglich eine Kategorie nach
    45. oben...*/
    46. function sendRequestBack(a) {
    48. try {
    49. req = window.XMLHttpRequest?new XMLHttpRequest():
    50. new ActiveXObject("Microsoft.XMLHTTP");
    51. } catch (e) {
    52. //Kein AJAX Support
    53. }
    56. req.onreadystatechange = handleResponse;
    57. id = document.getElementById(a).value;
    58. req.open('get', 'func.php?s='+ id);
    59. req.send(null);
    60. document.getElementById(a).style.backgroundColor = "#afafaf";
    61. document.getElementById(a).style.Color = "#adadad";
    62. document.getElementById(id).text = "wird geladen...";
    63. }
    64. /*Müsste generell funktionieren. Die Zurück Option wird jeweils in der func.php
    65. erstellt und ich hab da ein <option onClick="SendRequestBack(a=1)">eingefügt
    66. allerdings ist das <select onChange="sendRequest()" höhergestellt und so geht
    67. er trotzdem immer in die normale funktion mit der id ausgabe...</problem3>*/
    70. function handleResponse() {
    71. /*alert(b);*/
    72. if ((req.readyState == 4) && (req.status == 200)) {
    73. document.getElementById(a).innerHTML = req.responseText;
    74. document.getElementById(a).style.backgroundColor = "#ffffff";
    75. document.getElementById(a).style.Color = "#000000";
    77. }
    78. }
    79. //-->
    80. </script>
    82. </head>
    83. <tr>
    84. <td>
    85. <body>
    87. <p />Kategorie ausw&auml;hlen
    89. <p />
    90. <div id="Auswahl" style=InfoBoxContents></div>
    92. <select id="1" onChange="sendRequest(a=1)" onMouseDown="" style="width: 160px" >
    93. <?
    96. $categories_query = mysql_query("select a.categories_id,parent_id, b.categories_name from " . TABLE_CATEGORIES . " as a," . TABLE_CATEGORIES_DESCRIPTION . " as b where a.categories_id = b.categories_id and parent_id ='0' and b.language_id = " . (int)$language_id . " order by categories_name");
    97. echo '<option value="nichts">'.'Kategorie w&auml;hlen'.'</option>';
    98. while($row = mysql_fetch_object($categories_query ))
    99. {
    100. echo '<option value="'.$row->categories_id.'">'.$row->categories_name.'</option>';
    101. }
    102. ?>
    103. </select><br>
    105. </body></html>
    106. </td>
    107. </tr>
    Alles anzeigen

    Zum besseren Verständniss noch die func.php (etwas chaotisch noch: :wink: )

    Quellcode

    1. <?
    2. require('includes/application_top.php');
    4. if($_GET[s]!=="back"){
    6. $categories_query2 = tep_db_query("select categories_id from " . TABLE_CATEGORIES . " where parent_id = '".$_GET[s]."'");
    8. $check = Mysql_num_rows($categories_query2);
    10. $categories_query4 = tep_db_query("select parent_id from " . TABLE_CATEGORIES . " where categories_id = '".$_GET[s]."'");
    11. list($parent)= mysql_fetch_row($categories_query4);
    13. if($check !== 0){
    15. while($row = mysql_fetch_object($categories_query2))
    16. {
    17. $idy =$row->categories_id;
    21. $categories_query3 = tep_db_query("select categories_name from " . TABLE_CATEGORIES_DESCRIPTION . " where categories_id = '".$idy."'");
    23. $row2 = mysql_fetch_object($categories_query3);
    25. echo '<option onClick="sendRequest(a=1)" value="'.$row->categories_id.'">'. $row2->categories_name.'</option>';
    26. }
    27. }elseif($check==0){
    28. /*Keine weitere unterkategorie*/
    29. echo '<option>'.'Ordner ausgew&auml;hlt!'.'</option>';
    30. }
    34. if ($_GET[s] !== "0" ){
    35. /* Hier die Zurück option, die Nur kommt wenn es eine höhere Kategorie kommt
    36. mit besagter onClick function...*/
    37. echo '<option onClick="sendRequestBack(a=1)" value="'.$parent.'">'.'<--Zur&uuml;ck'.'</option>';
    38. }
    40. }else
    42. echo '<option value="nichts">'.'Kategorie w&auml;hlen'.'</option>';
    44. ?>
    Alles anzeigen


    zu <problem1>: bräuchte was wie man den text der ausgewählten option ausliest
    zu <problem2>: eigentlich wie 1 :wink:
    edit2 ok seh grad zu 1 und 2 gibts doch einiges bei Google, denk das find ich schon noch...
    edit3: ok habs!:idea:

    zu <problem3>: Dass er falls jmd die zurück Option verwendet die sendRequestBack() function nimmt, damit der die Kategorie über der dropDwonbox nicht nochmal ausgegeben wird...

    edit: Oh hab grad bemerkt, dass wenn man auf Zurück klickt, man ja nicht nur nicht die aktuelle Kategorie an die vorherigen dranhängen darf, sondern auch die letzte wieder weg muss :? ...
    ?

    thx 4 ur support

  • probleme 1 und 2 hast du vermutlich mit innerHTML realisiert, oder?

    problem 3: das"zurück" soll das formular wieder anzeigen, dass beim laden der seite aufgebaut wurde, oder?

    also

    einmal die Auswahl löschen

    Quellcode

    1. document.getElementById('Auswahl').innerHTML = '';


    und das Formular auf Default zurücksetzen
    http://de.selfhtml.org/javascript/objekte/options.htm

    Quellcode

    1. function AuswahlReset () {
    2. for (i = 0; i < document.Testform.Auswahl.length; i++)
    3. if (document.Testform.Auswahl.options[i].defaultSelected == true)
    4. document.Testform.Auswahl.options[i].selected = true;
    5. }


    Hoffe das hilft

  • Na habs glaub ich umständlicher gemacht :wink: :

    Quellcode

    1. document.getElementById(a).selectedIndex = "1";
    2. document.getElementById(a).options[1].text = "wird geladen...";


    Sollte eigentlich nur einen Schritt zurück gehen hab da mal ein Pic gemacht:
    [Blockierte Grafik: http://img110.imageshack.us/img110/1416/kathi1.jpg]
    Quasi wenn man da jetzt auf Zurück klickt der Text sich oben mit verändert und das hzgf nicht mehr erscheint...
    Glaub da muss man den text irgendwie aufteilen mit text=... und dann vielleicht [i-1] wieder löschen, aber meine Versuche dahingehen sind noch alle gescheitert
    irgendwie statt: ...

    Quellcode

    1. text2= document.getElementById(a).options[index].text;
    2. vorher = document.getElementById('Auswahl').innerHTML;
    3. if(text2!="<--Zurück" ){
    4. document.getElementById('Auswahl').innerHTML = vorher+" ->"+text2;
    5. vorher="";
    6. }

    ....so irgendwie

    Quellcode

    1. //Glaub isset() gibts in JS nicht, oder?
    2. //Soll wenn noch Zahl noch nicht belegt worden ist (im ersten Fall)
    3. //mit 0 anfangen...
    4. if(Zahl==null (oder ist des php??) )
    5. Zahl = "0";
    6. }
    7. text[Zahl]= document.getElementById(a).options[index].text;
    9. if(text[Zahl] != "<--Zurück" ){
    10. for (i=0; i<Zahl;i++){
    11. //irgendwie den text zusammenstellen, dass man das im Nachhinein evtl irgendwie steuern kann...
    12. }
    13. ++Zahl;
    14. }
    Alles anzeigen


    nur so vom Prinzip her...
    hab da schon ein paar sachen ausprobiert, aber hat noch nciht funktioniert...

  • klappt der Code überhaupt?
    mir fällt gerade auf, dass du gar kein Select erstellst

    und einen Integer als ID sollte man auch nicht verwenden

    Quellcode

    1. <select id="1" .....


    Außerdem solltest du Attribute immer in Anführungszeichen schreiben

    Quellcode

    1. <div id="Auswahl" style="InfoBoxContents">


    Letztendlich sollten meine beiden Codes dein Problem schon lösen
    Also einmal die eigene box "leeren"
    und dann noch die obere auswahlliste zurücksetzen

    Quellcode

    1. function AuswahlReset () {
    2. var ob = document.getElementById('hauptselect');
    3. for (i = 0; i < ob.length; i++)
    4. if (ob.options[i].defaultSelected == true)
    5. ob.options[i].selected = true;
    6. }

  • Jo der Code funktioniert wunderbar :wink: !
    Das mit dem Integer hab ich gleich mal getauscht und das InfoBoxContents war noch ein überbleibsel aber in Zukunft auch in ""...
    Bin mir immer noch nicht sicher, ob wir vom gleichen reden, das Element 'Auswahl' ist lediglich die textanzeige über der dropDownbox , die die bisher gewählten Kategorien auflistet...
    [Blockierte Grafik: http://img74.imageshack.us/img74/2742/katif1.jpg]
    Das DropDown hieß früher "1" und jetzt "optionen", hab das so gemacht, dass er einfach nochmal die letzten Einträge aus der Datenbank liest, aber glaub deine funktion ist da deutlich besser!

    Naja will hier nicht die ganze Zeit spammen, ich schau erstmal, dass ichs so irgendwie hinbekomm :wink:
    thx

  • "student2312" schrieb:

    Jo der Code funktioniert wunderbar :wink: !
    Das mit dem Integer hab ich gleich mal getauscht und das InfoBoxContents war noch ein überbleibsel aber in Zukunft auch in ""...
    Bin mir immer noch nicht sicher, ob wir vom gleichen reden, das Element 'Auswahl' ist lediglich die textanzeige über der dropDownbox , die die bisher gewählten Kategorien auflistet...
    [Blockierte Grafik: http://img74.imageshack.us/img74/2742/katif1.jpg]
    Das DropDown hieß früher "1" und jetzt "optionen", hab das so gemacht, dass er einfach nochmal die letzten Einträge aus der Datenbank liest, aber glaub deine funktion ist da deutlich besser!

    Naja will hier nicht die ganze Zeit spammen, ich schau erstmal, dass ichs so irgendwie hinbekomm :wink:
    thx


    Versteh ich das hier richtig: Die Hauptkategorie löst man mit parent_id='0' ?
    Wie holt man dann die erste Unterkategorie von dieser Hauptkategorie?
    Ich möchte was ähnliches machen und bin schon soweit das ich erst den Hersteller und das Modell auswähle - dann soll mir von dem gewählten Hersteller und dem Modell deren hauptkategorien angezeigt werden.

    Muß dann nicht die select-Abfrage einfach um where manufacturers_id = Auswahl and products_id = Auswahl erweitert werden?

  • poste doch bitte nochmal tabellenlayout und beispieldaten
    da ja mehrere variablen drinne sind, bei denen man vom snippet nicht beurteilen kann, ob sie interpretiert werden, mach doch noch ein echo mit dem request

    Quellcode

    1. echo "select a.categories_id,parent....";


    die "or die()" Klausel würde ich außerdem fürs Entwickeln zu mysql_error(); ändern um eventuelle Probleme besser analysieren zu können