Kategorie laden ala Ebay-Kleinanzeigen

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

  • Kategorie laden ala Ebay-Kleinanzeigen

    Hallo liebe programmierer Freunde,

    wie der Titel schon sagt suche ich ein auf ajax basierendes Script was es möglich macht die Kategorien nach zu laden,
    vom Design her wie Ebay-Kleinanzeigen ( Bsp. kleinanzeigen.ebay.de/anzeigen/p-anzeige-aufgeben.html# )

    Ich habe schon das [wiki]Select-Auswahl mit AJAX Abhängigkeit und verschiedenen Tabellen[/wiki] ausprobiert und für mich angepasst,
    leider sind dies Select Option Boxen, wie wird dies bei ebay-kleinanzeigen macht, spielt da Javascript eine große Rolle ?

    Meine Tabelle ist wie folgt aufgebaut.....

    Eine Kategorie Tabelle mit den Kategorien > id, name, parentID.

    Wenn ihr mir weiter helfen könntet würde ich mich sehr freuen.

    Großes Lob an die Tutorial Schreiber!!!

    Einen schönen Sonntag euch noch :)
    Nur wer seinen eigenen Weg geht, kann von niemandem überholt werden.

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

  • Ah alles klar, danke.

    Das geht dann natürlich nicht.
    Ich habe versucht Listenelemente draus zu machen, merke das es garnicht so einfach ist, dachte durch ein einfaches ersetzen einer Zeile ist es schick ;)

    Aber das were zu einfach, ich bin leider nur in PHP und CSS mit den Basics mal mehr mal weniger vertraut, mit Javascript bzw. Ajax habe ich
    mich noch garnicht beschäftigt, muss auch leider gestehen das ich es nur in meiner Freizeit mache und ganz schön viel ist :)

    Ich ziehe mein Hut vor dir Torben, dass du das alles hier auseinander halten und so viele Fragen immer beantworten kannst, egal in welche Richtung !
    Dein Lebenslauf spricht für sich ;)

    Siehst du eine einfache & schnelle Möglichkeit das ganze auf Listenelemnte umzuschreiben?
    Nur wer seinen eigenen Weg geht, kann von niemandem überholt werden.

  • Da hast du wohl recht, was mich ein wenig Stört ist ist das Design, im Firefox bleibt die Scrollleiste immer zu sehen, im IE schick ;)

    Ich habe eine schöne Art gefunden so eine Select Box etwas zu verschönern....

    ka-mediendesign.de/blog/indivi…ect-und-checkbox-styling/

    Habe sie versucht einzubauen nur leider füllt er die Felder nicht aus, er zeigt mir keins zur Auswahl und öffnet sich auch nur mit einer einzelnen Zeile nach unten
    obwohl ich 3 Datensätze habe, ich denke aber da wird sich irgendwas mal wieder nicht miteinander verstehen :)

    Aber dieses Design würde schon richtig schick sein, nur leider bekomme ich es nicht zum laufen :(

    Kennst du eine andere Art es etwas aufzuschmücken, außer die leider wenigen Möglichkeiten mit CSS ?
    Nur wer seinen eigenen Weg geht, kann von niemandem überholt werden.

  • Stimmt, ein weißer Balken ist dann auch noch möglich :)

    Sage mal ich versuche die Ausgabe nebeneinander sprich horizontal auszugeben , aber irgendwie will es nicht, was mach ich falsch ?

    Quellcode

    1. <table>
    2. <tr>
    3. <td id="elem1" style="display:none">
    4. <select name="hauptkategorie" size="5" onchange="sendRequest(this, 'elem2')">
    5. <option value=""></option></select></td>
    7. <td id="elem2" style="display:none">
    8. <select name="unterkategorie" size="3" onchange="sendRequest(this, 'elem3')">
    9. <option value=""></option></select></td>
    11. <td id="elem3" style="display:none">
    12. <select name="unterunterkategorie" size="3" onchange="sendRequest(this, 'elem4')">
    13. <option value=""></option></select></td>
    15. <td id="elem4" style="display:none">
    16. <select name="unterunterkategorie" size="3" onchange="sendRequest(this, 'elem5')">
    17. <option value=""></option></select></td>
    19. <td id="elem5" style="display:none">
    20. <select name="unterunterkategorie" size="3" onchange="sendRequest(this, 'elem6')">
    21. <option value=""></option></select></td>
    23. <td id="elem6" style="display:none">
    24. <select name="unterunterkategorie" size="1" onchange="sendRequest(this)">
    25. <option value=""></option></select></td>
    26. </tr>
    27. </table>
    Alles anzeigen


    Ist es möglich im letzten Select eine Art Fertig Meldung auszugeben, dass nicht einfach zum Schluss eine leere Select Box da steht ?
    Nur wer seinen eigenen Weg geht, kann von niemandem überholt werden.

  • Dank dir, hat gut geklappt mit den divs... für alle die es auch brauchen .....

    Quellcode

    1. <div>
    3. <div id="elem1" style="display:none; float:left;">
    4. <select name="hauptkategorie" size="5" onchange="sendRequest(this, 'elem2')">
    5. <option value=""></option></select></div>
    7. <div id="elem2" style="display:none; float:left;">
    8. <select name="unterkategorie" size="5" onchange="sendRequest(this, 'elem3')">
    9. <option value=""></option></select></div>
    11. <div id="elem3" style="display:none; float:left;">
    12. <select name="unterkategorie" size="5" onchange="sendRequest(this, 'elem4')">
    13. <option value=""></option></select></div>
    15. <div id="elem4" style="display:none; float:left;">
    16. <select name="unterkategorie" size="5" onchange="sendRequest(this, 'elem5')">
    17. <option value=""></option></select></div>
    19. <div id="elem5" style="display:none; float:left;">
    20. <select name="unterkategorie" size="5" onchange="sendRequest(this, 'elem6')">
    21. <option value=""></option></select></div>
    23. <div id="elem6" style="display:none; float:left;">
    24. <select name="unterkategorieende" size="5" onchange="sendRequest(this)">
    25. <option value=""></option></select></div>
    27. </div>
    28. <br style="clear: left;" />
    Alles anzeigen





    Kannst du mir auch sagen, was ich ändern muss,
    dass eine Art Fertig Meldung erschein wenn man die letzte Select Box ausgewählt hat,
    zur Zeit kommt zum Schluss einfach nur eine leere Select Box.

    Vielen Dank schonmal!
    Nur wer seinen eigenen Weg geht, kann von niemandem überholt werden.

  • Naja, das ist im Mini Tutorial nicht vorgesehen. Wenn du es programmieren magst, dann würde ich empfehlen, dass du im letzten Select einen zusätzlichen Parameter angibst.

    Quellcode

    1. ... onchange="return sendRequest(this, false, 'success')"


    Den JavaScript änderst du wie folgt:

    Quellcode

    1. function sendRequest(domref, target, success) {
    2. if(success) {
    3. success = document.getElementById(success);
    4. success.style.display = 'block';
    5. }
    7. // skip if no target specified
    8. if(!target) return false;


    Und im HTML platzierst du eine Success Meldung innerhalb von <div id="success"></div>

  • Morgen Torben,

    dass klappt ganz gut, nur leider klappt es nur wenn ich auch wirklich bei dem letzten Select Element ankomme,
    dass heißt ist die Kategorientiefe nicht so tief sondern nur 1 oder 2 Unterkategorien tief, greift es nicht, weil er ja das nächste Elemente anspricht
    was aber dann keinen Inhalt hat.

    Kann man den Parameter "success" nicht einfach immer übergeben und im Javascript abfragen, wenn Rückgabewert leer,
    dann gebe Success aus ?
    Nur wer seinen eigenen Weg geht, kann von niemandem überholt werden.

  • [wiki]Select-Auswahl mit AJAX Abhängigkeit[/wiki]

    script.js Zeile 52 - Dort kannst du prüfen ob die Daten leer sind und success ausgeben.
    In dem Fall darf domref natürlich nicht leer sein, da Zeile 22 sonst zum Abbruch führt.

    Quellcode

    1. /**
    2. * clears a select form element
    3. *
    4. * @param targetSel - dom reference to the select element
    5. */
    6. function clearSelect(targetSel) {
    7. for (var i=targetSel.length; i>=0; i--) {
    8. targetSel.options[i] = null;
    9. }
    10. }
    11. /**
    12. * sends a request under usage of a loading graphic - targettable has to be positioned relative
    13. *
    14. * @param srcref - reference to the select element with chosen data
    15. * @param target - form element name of target element
    16. */
    17. function sendRequest(domref, target) {
    18. // skip if no target specified
    19. if(!target) return false;
    21. // save reference to next target
    22. if(domref) domref.followup = target;
    24. var req;
    25. try {
    26. req = window.XMLHttpRequest ? new XMLHttpRequest():
    27. new ActiveXObject("Microsoft.XMLHTTP");
    28. } catch (e) {
    29. // no AJAX Support
    30. }
    31. req.onreadystatechange = function() {
    32. if ((req.readyState == 4) && (req.status == 200)) {
    33. // merge empty line with response
    34. var data = eval('(' + req.responseText + ')');
    35. var targetRef = document.getElementById(target);
    36. var targetSel = targetRef.getElementsByTagName('select')[0];
    38. // make it visible
    39. targetRef.style.display = 'block';
    41. // clear old data
    42. clearSelect(targetSel);
    44. // fill with data from json response
    45. var i=0;
    46. for(var x in data) {
    47. targetSel.options[i++] = new Option(
    48. data[x].text,
    49. data[x].id
    50. );
    51. }
    53. // clear all followups
    54. while(targetSel.followup) {
    55. targetRef = document.getElementById(targetSel.followup);
    57. // make it hidden
    58. targetRef.style.display = 'none';
    60. // mark next select
    61. targetSel = targetRef.getElementsByTagName('select')[0];
    63. // clear old data
    64. clearSelect(targetSel);
    65. }
    66. }
    67. }
    69. req.open('post', 'ajax.php');
    70. req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    72. // send empty post with initial load
    73. req.send(domref !== null ? 'id='+domref.value+'&name='+domref.name : '');
    75. return false; // return false to avoid reload/recentering of the page
    76. }
    Alles anzeigen

  • In welcher Variablen steckt der der Ausgabewert, den ich abfragen müsste ?

    Ich habe jetzt in jedem

    Quellcode

    1. <div id="elem2" style="display:none; float:left;">
    2. <select name="unterkategorie" size="5" onchange="sendRequest(this, 'elem3', 'success')">
    3. <option value=""></option></select></div>

    success mit übergeben.

    Und an Zeile 52

    Quellcode

    1. if(success) {
    2. success = document.getElementById(success);
    3. success.style.display = 'block';
    4. }

    eingefügt.

    Was muss noch in der if Abfrage rein, dass er es auch nur dann aus gibt wenn das Select leer wäre, also die Datenbankanfrage kein Ergebnis zurück gibt ?
    Nur wer seinen eigenen Weg geht, kann von niemandem überholt werden.

  • Hey Torben, ich bin deinem Rat gefolgt,
    und werfe nun ein Div Container mit einer Fertigmeldung über alle Select Boxen, wenn die letzt mögliche Auswahl getroffen wurde.

    Nach langem suchen und probieren, muss ich doch nochmal nachfragen :)

    Gibt es die Möglichkeit, wenn ja wie, die Select Boxen zu resetten bzw. den ganzen Div Container der Select Box/en neuzuladen?
    Problem ist wenn die Auswahl getroffen wurde und die Fertigmeldung nun über allen Select Boxen liegt, kann ich sie nicht mehr ändern.

    Danke schonmal!
    Schönen Abend noch :)
    Nur wer seinen eigenen Weg geht, kann von niemandem überholt werden.

  • Noch eine Zusatzfunktion? Ohje... na dann lass uns Callbacks unterstützen

    Quellcode

    1. function sendRequest(domref, target, success) {
    2. if(success) {
    3. if(typeof success == 'function') {
    4. success();
    5. } else {
    6. success = document.getElementById(success);
    7. success.style.display = 'block';
    8. }
    9. }


    Außerdem musst du folgende Methode bekannt machen:

    Quellcode

    1. function easyfunc1() {
    2. // zeige success
    3. success = document.getElementById(success);
    4. success.style.display = 'block';
    6. // verstecke die selects
    7. selectdiv = document.getElementById('div_um_select');
    8. selectdiv.style.display = 'none';
    9. }


    und so aufrufen:

    Quellcode

    1. ... onchange="sendRequest(this, 'elem3', easyfunc1)">