Brauche Hilfe beim dynamischen nachladen von abhängigen elementen mit AJAX

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

  • Brauche Hilfe beim dynamischen nachladen von abhängigen elementen mit AJAX

    Hi Leute,

    Ich weiß es gibt schon ein Thema dazu aber bei mir liegt das Problem woanders.

    Ich wollte den von Torben Brodt im Easy Coding Wiki bereitgestellten Code des Artikels „[wiki]Select-Auswahl mit AJAX Abhängigkeit[/wiki]“ für ein PHP-Projekt verwenden, ich komme aber nicht dahinter wie ich den Code anpassen muss damit er auf meine Datenbank passt. Es geht darum das die Zuordnung welche Kategorie eine Unterkategorie einer anderen ist, in einer separaten Tabelle nur über ID-nummern gespeichert ist. Auch durch das Tutorial "[wiki]Select-Auswahl mit AJAX Abhängigkeit und verschiedenen Tabellen[/wiki]" steig ich nicht wirklich durch. Ich hoffe das mir jemand von euch die Tutorials noch mal näher erläutern kann.

    Es sieht sozusagen so aus:

    kategorietabelle:
    Kategorie_ID, Name, Beschreibung, Ersteller

    Parent_to_Child_tabelle:

    Parent_ID, Child_ID

    Die Datenbank ist eine MySQL-datenbank und ich benutze PHP5. Wenn ein Kategorie in einer Selectbox ausgewählt wurde soll in der nächsten Selectbox die Unterkategorien geladen werden (wie im tutorial). gleichzeitig soll aber in einem div-bereich (oder einem anderen passenden container) die beschreibung der Katogire (oder alternativ ein zusammengesetzter text aus mehreren feldern [bin mir noch nicht ganz sicher welche von beiden varianten ich nehmen will]) angezeigt werden welche in der zuletzt geändertet selectbox ausgewählt wurde.
    Sprich: "...onchange= unterkategorien nachladen, beschreibung/text in div laden..."

    ich danke schon mal im vorraus
  • Mein problem ist das ich nicht durch die tutorials durchsteige. Mein PHP und MySQL kenntnisse reichen aus um einfache sachen hinzubekommen aber bei dynamischen sachen haperts bei mir noch und wenn dann auch noch ajax dazu kommt raucht mir der kopf und ich komm nicht weiter.
    Im groben hab ich ja verstanden was der code in den tutorials macht, aber ich raff nicht wie ich den code anpassen muss, damit er meinem vorhaben dienlich ist.
    Ich versteh z.b. nicht wo bei folgendem code die $_REQUEST['id'] herkommt.

    Quellcode

    1. $id = isset($_REQUEST['id']) ? $_REQUEST['id'] : 0;
    2. // (1) example array with four main categories
    3. for($i=0; $i<4; $i++) {
    4. // four subcategories each
    5. for($j=($i*10); $j<($i*10)+3; $j++) {
    6. $idx = $j+1;
    7. $data[$i][$j] = array(
    8. 'id' => $idx,
    9. 'text' => sprintf('cat %d (parent:%d)', $idx, $i),
    10. );
    11. // with three childs eiter
    12. for($k=($idx*10); $k<($idx*10)+3; $k++) {
    13. $data[$idx][$k] = array(
    14. 'id' => $k,
    15. 'text' => sprintf('subcat %d (parent:%d)', $k, $idx),
    16. );
    17. }
    18. }
    19. }
    20. // access the childs with its parent index
    21. $return = $data[$id];
    22. echo json_encode($return);
    Alles anzeigen


    im prinzip brauch ich jemanden der mir die beiden Tutorials die ich im anfangspost genannt habe noch einmal genauer beschreibt, damit ich überhaupt erstmal anfang finde ... bin halt voll der noob was web-programmierung angeht.
  • Hmmm naja, ich hab jetz einfach mal drauf los gearbeitet und rumprobiert... allerdings läuft die sahe nich... wahrscheinlich hab ich den code aus dem tutorial nicht richtig angepasst oder bei der übergabe läuft was falsch...

    hier mein ajax.php:

    Quellcode

    1. <?php
    2. $Child_id_Array=array("0");
    3. $sql = "SELECT unterkklasse_id
    4. FROM klasse_zu_unterklasse
    5. WHERE parent_id = :id";
    6. $ERG = @mysql_query($sql);
    7. for($f=0;$f<mysql_num_rows($ERG);$f++){
    8. $Child_id_Array[$f]= @mysql_result($ERG,$f,'Knd_id');
    9. }
    10. $child_names_array=array("0");
    11. for($g=0;$g<count($Child_id_Array);$g++)
    12. {
    13. $Names_SQL = 'SELECT klassen_id, klassen_name, klassen_beschreibung
    14. FROM klassentabelle
    15. WHERE klassen_id='$Child_id_Array[$g]'
    16. AND klassen_Creator = '.$_SESSION['client_id'].')
    17. OR (klassen_public = 1)';
    18. $child_names_array[$g]= = @mysql_query($Names_SQL);
    19. }
    20. $return = $child_names_array->fetchAll();
    21. echo json_encode($return)
    22. ?>
    Alles anzeigen



    meine ajax.js sieht so aus:

    Quellcode

    1. var url = "ajax/";
    2. function sendRequest(domref, target) {
    3. // skip if no target specified
    4. if(!target) return false;
    5. // save reference to next target
    6. if(domref) domref.followup = target;
    7. var req;
    8. try {
    9. req = window.XMLHttpRequest ? new XMLHttpRequest():
    10. new ActiveXObject("Microsoft.XMLHTTP");
    11. } catch (e) {
    12. alert( "Ihr Webbrowser unterstuetzt leider kein Ajax!" );
    13. }
    14. req.onreadystatechange = function() {
    15. if ((req.readyState == 4) && (req.status == 200)) {
    16. // merge empty line with response
    17. var data = eval('(' + req.responseText + ')');
    18. var targetRef = document.getElementById(target);
    19. var targetSel = targetRef.getElementsByTagName('select')[0];
    20. // make it visible
    21. targetRef.style.display = 'block';
    22. // clear old data
    23. clearSelect(targetSel);
    24. // fill with data from json response
    25. var i=0;
    26. for(var x in data) {
    27. targetSel.options[i++] = new Option(
    28. data[x].klassen_beschreibung,
    29. data[x].klassen_name,
    30. data[x].klassen_id
    31. );
    32. }
    33. // clear all followups
    34. while(targetSel.followup) {
    35. targetRef = document.getElementById(targetSel.followup);
    36. // make it hidden
    37. targetRef.style.display = 'none';
    38. // mark next select
    39. targetSel = targetRef.getElementsByTagName('select')[0];
    40. // clear old data
    41. clearSelect(targetSel);
    42. }
    43. }
    44. }
    45. req.open('post', 'ajax.php');
    46. req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    47. // send empty post with initial load
    48. req.send(domref !== null ? 'id='+domref.value+'&name='+domref.name : '');
    49. return false; // return false to avoid reload/recentering of the page
    50. }
    Alles anzeigen


    und hier ist die index.php:

    Quellcode

    1. <?php
    2. $ausgabe='<form method="post" action="" id="ajaxSelect">
    3. <table>
    4. <tr>
    5. <td>
    6. text
    7. </td>
    8. </tr>
    9. <tr>
    10. <td>
    11. &nbsp;
    12. </td>
    13. </tr>
    14. <tr id="elem1" style="display:none">
    15. <td>HauptKategorie:</td>
    16. <td><select name="hauptkategorie" onchange="sendRequest(this, 'elem2')"><option value=""></option></select></td>
    17. </tr>
    18. <tr id="elem2" style="display:none">
    19. <td>UnterKategorie:</td>
    20. <td><select name="unterkategorie" onchange="sendRequest(this, 'elem3')"><option value=""></option></select></td>
    21. </tr>
    22. <tr id="elem3" style="display:none">
    23. <td>UnterUnterKategorie1:</td>
    24. <td><select name="unterunterkategorie" onchange="sendRequest(this, 'elem4')"><option value=""></option></select></td>
    25. </tr>
    26. <tr id="elem4" style="display:none">
    27. <td>UnterUnterKategorie2:</td>
    28. <td><select name="unterunterunterkategorie" "><option value=""></option></select></td>
    29. </tr>
    30. </table>
    31. <div>
    32. <input type="submit" />
    33. </div>
    34. </form>
    35. ';
    36. echo $ausgabe;
    37. ?>
    Alles anzeigen



    ich find den fehler nicht... könnt ihr mir weiterhelfen?
  • Also in der index.php hast du einen Syntax Fehler. Achte auf die Anführungszeichen.
    Außerdem führst du in der ajax.php ein fetchAll auf einem Array Element aus. Das fetchALl ist eine PDO Methode.

    Was hast du denn im JavaScript verändert? Für dein Vorhaben, musst du nur die ajax.php und die Namen der Selectfeder in der index.php ändern.

    Basis sollte dieses Tutorial sein, weil es auf die Datenbank ausgelegt ist. Ich habe noch entsprechende Datenbankklassen ergänzt.
    [wiki]Select-Auswahl mit AJAX Abhängigkeit und verschiedenen Tabellen[/wiki]

    Schritt1 index.php
    <select name="xxx" hier sollte das xxx für etwas eindeutiges wie den Tabellennamen stehen.

    Schritt2 ajax.php
    Vergleich das mal mit meinem ersten Beitrag von hier: AJAX Select Abhängig
    Du kannst anhand des $tablename eine switch/case Anfrage bauen um beliebige Queries zusammenzuschreiben.

    Übrigens erleichtert die Arbeit mit Firebug die Aufgabe sehr.
  • Soo ich hab versucht die Tips zu beherzigen und glaube die tutorials verstanden zu haben. nun hab ich aber das problem, das der inhalt der selectboxen nicht geladen wird. Die Javafunktion wird garnicht aufgerufen denk ich (hab an verschiedenen stellen textausgaben eingefügt um das zu prüfen).

    hier der code an der stelle, an der die ajax.js aufgerufen wird:

    Quellcode

    1. echo' <tr>
    2. <td>
    3. <table>
    4. <tr id="hauptkategorie" style="display:block">
    5. <td>HauptKategorie:</td>
    6. <td><select name="hauptkategorie" size="1" onChange=\'javascript:sendSelBoxRequest(this, document.getElementById("unterkategorie"));\'><option value="">'.$arbmkat_select_option.'</option></select></td>
    7. </tr>
    8. </table>
    9. </td>
    10. <td>
    11. <table>
    12. <tr id="unterkategorie" style="display:block">
    13. <td>UnterKategorie:</td>
    14. <td><select name="unterkategorie" size="1" onChange=\'javascript:sendSelBoxRequest(this, document.getElementById("unterunterkategorie"));\'><option value=""></option></select></td>
    15. </tr>
    16. </table>
    17. </td>
    18. </tr>';
    Alles anzeigen


    und hier meine neue ajax.php

    Quellcode

    1. <?php
    2. $Child_id_Array=array("0");
    3. $f=0;
    4. $sql = "SELECT unterklasse_id
    5. FROM klasse_zu_unterklasse
    6. WHERE parent_id = :id";
    7. $ERG = @mysql_query($sql, $central_datenbank->central_verbindung);
    8. while($zeile = mysql_fetch_row($ERG))
    9. $Child_id_Array[$f]= $zeile[1];
    10. }
    11. $child_array=array("0");
    12. for($g=0;$g<count($Child_id_Array);$g++)
    13. {
    14. $Names_SQL = 'SELECT Klassen_id, Klassen_name
    15. FROM Klassentabelle
    16. WHERE Klassen_id='$Child_id_Array[$g]'
    17. AND Klassen_Creator = '.$_SESSION['client_id'].')
    18. OR (Klassen_public = 1)';
    19. $child_array[$g]= @mysql_query($Names_SQL);
    20. }
    21. echo 'Hallo!!! ';
    22. echo json_encode($child_array);
    23. ?>
    Alles anzeigen

    Dieser Beitrag wurde bereits 3 mal editiert, zuletzt von TheMansn ()

  • SargTeX schrieb:

    1. Bitte Quellcode hervorheben ;).
    2. Java != JavaScript
    3. javascript:funktionsname brauchst du bei Events wie "onchange" nicht. Der Parameter wird automatisch als JavaScript behandelt.
    4. Wo ist deine Funktion sendSelBoxRequest? Sonst erstell sie mal und füge nur ein alert('Hello World'); rein, damit siehst du, ob es aufgerufen wird.


    Zu 1. Wie meinst du das? Ich hab den entsprechenden Quellcode bei dem ich Probleme habe schon in meinen Posts eingefügt und abgeteilt.
    zu 2. Ich weiß das Java nicht gleich JavaScript ist, hab auch nie behauptet das es so ist. Wenn es doch so aussieht, dann lag es vllt daran das ich mich verschrieben habe.
    Zu 3. Danke für den Tipp werde ich beachten.
    zu 4. In einem Vorherigen Post is mein "ajax.js" drin. Dort ist die Funktion "sendSelBoxRequest" enthalten. Alles was ich dran geändert hatte war, das ich Zeile 34 rausgenommen habe.
    Wie ich schon geschrieben habe, habe ich an mehreren Stellen bereits Ausgaben (echo bei php und alert bei js) eingefügt um zu Testen wie das Programm sich verhält und
    ob die Funktion überhaupt aufgerufen wird. Die alerts in der Funktion werden nicht geliefert also muss ich davon ausgehen das die Funktion nicht aufgerufen wird. Dem zu Folge
    vermute ich, das entweder ein Fehler bei der Art wie ich die Funktion aufrufe vorliegt oder das die Parameter falsch sind oder das ein Fehler vorhanden ist, von dem ich (als absoluter
    Anfänger was web-programmierung angeht) nicht weiß das er da ist.

    EDIT: habe noch ma alles durchgeguckt. die "sendSelBoxRequest" wird aufgerufen (warums auf einmal klappt weiß ich nicht). Wenn ihr in meinem code für die ajax.js reinschaut, seht ihr, das wie im tutorial auch eine "req.onreadystatechange = function(){}" sowie eine "req.open('post', 'ajax.php');" vorhanden sind.
    Diese werden aus einem mir unbekanten grund nicht ausgeführt.

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

  • Hey ;D.

    1.: Du kannst die Sachen entweder als normalen Quellcode darstellen, oder mit der konkreten Sprache:

    Quellcode

    1. function javascript() {alert("hallo");}


    Dafür siehe unter dem Editor die "Syntax"-Leiste. Ist dann einfacher zu lesen, muss ich in meinem Programm auch dringend einbauen O_o.
    /EDIT: BTW so, wie du es im Startpost gemacht hast :D.

    3. Ergänzung: Das "javascript:funktionsname" hat man bei alten Browsern benötigt, die kein JS unterstützen, damit diese es ignorieren und keine Fehlermeldungen anzeigen.

    4. Hast du mal auf Fehlermeldungen überprüft? Z.B. im FF im Addon "Firebug" in der Konsole. Was gibt in Zeile 17 "alert(req);" aus?
    Ansonsten würde ich dir generell empfehlen, später jQuery zu benutzen. Dort gibt es eine schöne AJAX-Funktion , die die ganzen Sachen vereinfacht und automatisch macht ;).
  • SargTeX schrieb:

    Hey ;D.

    1.: Du kannst die Sachen entweder als normalen Quellcode darstellen, oder mit der konkreten Sprache:

    Quellcode

    1. function javascript() {alert("hallo");}


    Dafür siehe unter dem Editor die "Syntax"-Leiste. Ist dann einfacher zu lesen, muss ich in meinem Programm auch dringend einbauen O_o.
    /EDIT: BTW so, wie du es im Startpost gemacht hast :D.

    3. Ergänzung: Das "javascript:funktionsname" hat man bei alten Browsern benötigt, die kein JS unterstützen, damit diese es ignorieren und keine Fehlermeldungen anzeigen.

    4. Hast du mal auf Fehlermeldungen überprüft? Z.B. im FF im Addon "Firebug" in der Konsole. Was gibt in Zeile 17 "alert(req);" aus?
    Ansonsten würde ich dir generell empfehlen, später jQuery zu benutzen. Dort gibt es eine schöne AJAX-Funktion , die die ganzen Sachen vereinfacht und automatisch macht ;).


    1.: achso meinst du das :D

    3.: ich weiß nich warum, aber wenn ich das "javascript:" rausnehme, dann wird die Funktion garnich aufgerufen O_o

    4.: alert(req); gibt "[object XMLHttpRequest]" aus, keine ahnung ob das so richtig ist.... und beim überwachunspunkt steht da "ReferenceError: req is not defined"

    EDIT: boar lol bin ich doof... mir is grad aufgefallen, ich in der ajax.php einen semikolon vergessen habe... da wird der php code logischer weise nicht ausgeführt. jetz wird zwar die "sendSelBoxRequest" und die "req.onreadystatechange = function()" aufgerufen aber wirklich hinhauen tut sie noch nicht

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

  • Sehr gut, damit sind wir ja schonmal ein Stück weiter ;D.
    Ich hoffe, du verwendest beim Testen mindestens FF 3.6? Nur so nebenbei.

    [object XMLHttpRequest] ist richtig: "object" bedeutet, dass wir ein Objekt, also eine Instanz einer Klasse erstellt haben- und das hast du ja in Zeile 12/13 gemacht. Stichwort: "new"
    "XMLHttpRequest" ist der Name der Klasse, von der du ein Objekt erzeigt hast. Das ist auch soweit korrekt, da du in Zeile 12 ja "new XMLHttpRequest()" ausführst.

    Wo ist dein Breakpoint?
  • nachdem mir der fehlende semikolon aufgefallen ist und ich das geändert habe, kommt wird die variable req gefüllt und es kommt keine fehlermeldung mehr.
    das programm lädt aber immernoch nicht die nächste selectbox nach. Kann das vllt daran liegen, das bei req etwas falsches gespeichert ist oder das im target etwas stehen könnte?
  • Dann gib mal in Zeile 19 ein

    Quellcode

    1. alert("Fertig!");

    rein. Wird das alert nicht ausgegeben, so weisst du schonmal, dass in der Verbindung iwo ein Fehler drin liegt- readyState wird nie 4, oder status wird nie 200. Status = 404 weist übrigens darauf hin, dass die gesuchte Datei nicht gefunden werden kann.
    Andernfalls fügst du dahinter noch ein

    Quellcode

    1. alert(req.responseText);
    ein. Damit bekommst du zumindest eine verkürzte Form des HTML-Codes angezeigt ;).

    Nebnbei: Pack sonst mal das eval() (Zeile 20, ca) weg. Eval is evil, deswegen könnte es dort mglw Probleme geben.
  • hmmm also wies aussieht wird "if ((req.readyState == 4) && (req.status == 200))" nie erfüllt. ich finds aber seltsam weil bis auf die anpassung der variablennamen hab ich die ajax.js 1-zu-1 aus dem tutorial "Select-Auswahl mit AJAX Abhängigkeit" aus dem easy-coding wiki.

    EDIT: ich hab noch ma mit firebug drüber geschaut. readyState wird 4 und geht dann wieder auf 1 aber der status wird 404 also "nicht gefunden" oder wie?
    im tutorial wird ja von einer bestimten anzahl an kategorie und unterkategorien ausgegangen. bei mir ist es aber so, dass
    die anzahl an kategorien und untekategorien unteschiedlich ist. ich müsste das also dynamisch machen oder?
    wie bekomm ich das hin bzw. wie müsste ich den code in der ajax.js ändern??

    hier der verlauf der beiden variablen:
    req.readystate req.status
    1 -
    2 -
    1 404
    1 -
    3 -
    1 404
    1 -
    4 -
    1 404
    1 404

    der - bedeutet, das bei dem jeweiligen durchlauf für diese variable garnichts geliefert wurde.
    ich werd ma noch n bißchen rumprobieren

    Dieser Beitrag wurde bereits 5 mal editiert, zuletzt von TheMansn ()