[JS] AUs drop-down-Menü neue Zeile einfügen und in DB anspeichern

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

  • [JS] AUs drop-down-Menü neue Zeile einfügen und in DB anspeichern

    Hallo zusammen,

    ich hoffe, der gewählte Titel ist jetzt nicht allzu verwirrend.^^

    Ich hab mir in Kopf gesetzt eine kleine Tunierauswertungssoftware zu programmieren. Mehr oder weniger komm ich zur Zeit gut vorran. Allerdings bräuchte ich jetzt eine Lösung über JS - was ja nicht wirklich mein Gebiet ist - und hoffe, dass ihr mir dabei helfen könnt.
    Folgendermaßen:

    Über ein Formular werden die Teilnehmer eingegeben (Name, Klasse, Scheibe, Verein, usw.). Und bei Verein wollte ich jetzt ein Drop-Down-Menü machen, dessen Auswählmöglichkeiten aus einer Datenbank ausgelesen werden. Da aber die Vereine auch alle einzelnd eingetragen werden müssen, und es Unfug wäre erst eine Liste mit allen Vereinen zu erstellen, hab ich mri das so vorgestellt:
    In dem Drop-DownMenü steht eben die Liste mit allen bereits vorhandenen Vereinen (die Vereine werden über eine id aus der Datenbank den Teilnehmern zugeordnet) : Am Ende des Menüs soll dann stehen "Neuer Verein" und wenn man da drauf klickt, soll ein Textfeld erscheinen. In das Textfeld gibt man dann den neuen Vereinsnamen ein. Hinter dem Textfeld ist dann ein Haken. Klickt man auf den Haken, soll der neue Verein in die Datenbank eingetragen und alle Drop-Down-Menüs aktualisiert werden (also der neue Verein dann ebenfalls in der Liste sein). In dem Menü, in dem der neue Verein eingetragen wurde, soll dieser dann gleich ausgewählt sein und bei den anderen Menü's der schon ausgewählte Verein auch ausgewählt bleiben.

    Was eine Schwierigkeit dastellen könnte - ka, obs das wirklich tut - ist, dass die Anzahl der Drop-Down-Menüs variabel ist (Bevor man an das Formular kommt muss man die Anzahl der Teilnehmer angeben).

    Ich hoffe, mir kann jemand helfen, bzw. den Code dazu schreiben.

    LG

    Fipsi

  • Moin Fipsi!

    Wenn du daran interessiert bist, ein bisschen was neues zu lernen bzw. den Horizont zu erweitern, würde ich dir jQuery und Ajax nahe legen.

    Warum? Über jQuery kannst du mit simplen Selektoren eine variable Anzahl von Elementen manipulieren, zum Beispiel für alle Elemente mit der klasse "verein-dropdown" den Selector ".verein-dropdown" verwenden. So hättest du schon mal deine kleine Schwierigkeit gelöst. ;) Über Ajax kannst du die Daten von deinem frisch eingetippten Verein an ein PHP Script schicken, dass den Eintrag in der Datenbank dazu anlegt. Das Eventgebundene Anzeigen des Eingabefeldes für den Namen des Vereins kannst du mit "show" bzw "hide" machen, oder animiert mit "animate" (alles drei sind jQuery Funktionen, einfach mal googlen :) )

    Wenn du noch mehr Informationen brauchst oder tatsächlich fertigen Code willst, sag einfach Bescheid. ;)

    Viele Grüße und Happy Coding!
    Bodo06

  • Ne, also mir wär n fertiger Code jetzt ehrlich gesagt lieber.
    Ich hab nicht mehr allzu viel Zeit, die Software noch fertig zu programmieren, da würde ich mit neuem - in dem Rahmen - anzulehrnen bei weitem nicht hinkommen. Hätte ja nen Wälzer mit mehreren Hundert Seiten neben mir liegen über JS und den Erweiterungen, nur bisher noch nicht die große Lust dazu ;)

  • So, jetzt hab ich zumindest schon mal den Teil, dass dann ein Textfeld aufgeht, wenn man den entsprechenden Punkt im Drop-Down-Menü anklickt:

    Quellcode

    1. $("table select").on("click", function(){
    2. x = $(this).attr("name").split("_");
    3. z = $(this).val();
    5. if (z == "new") {
    6. var new_verein = prompt("Bitte neuen Verein angeben:");
    7. }
    8. })


    Quellcode

    1. <td><select name="verein_1B" size="1"><option>Bitte Verein wählen</option><option value="new">Neuen Verein eintragen</option></select></td>


    Jetzt ist nurnoch die Frage, wie ich das abspeichern und dann in allen Drop-Down-Menü's neuladen kann.. da hörts dann bei mir aber auf, weil ich keine Ahnung hab, wie ich was von JS in php bzw.MySQL übergeben kann.. hier bräuchte ich jetzt doch bitte hilfe.

    Danke schonmal

    LG

    Fipsi

  • Sorry für Tripple-Post, aber nach einigem Haare-raufen und ewiger Fehlersucherei bin ich jetzt ein Stückchen weiter gekommen:

    Quellcode

    1. $("table select").on("click", function(){
    2. x = $(this).attr("name").split("_");
    3. z = $(this).val();
    5. [...]
    7. if (z == "new") {
    8. var new_verein = prompt("Bitte neuen Verein angeben:");
    9. var val = "default";
    11. val = $.post("teilnehmer.php", {do: "new_verein", name: new_verein}).done(function(data) { alert("Data Loaded: " + data); });
    12. alert(val);
    14. if (new_verein != null){
    15. $('.verein').append($('<option>')
    16. .attr("value", val)
    17. .attr("selected", false)
    18. .text(new_verein));
    20. $(this).append($('<option>')
    21. .attr("value", val)
    22. .attr("selected", true)
    23. .text(new_verein));
    25. }
    26. }
    27. });
    Alles anzeigen


    Quellcode

    1. $seiten_inhalt = "";
    2. $name = $_POST['name'];
    3. $sql = "INSERT INTO `verein`
    4. SET
    5. name = '$name'";
    6. $mysqli->query($sql);
    7. echo $mysqli->insert_id;
    8. //return $id;
    9. //echo $id;


    Kann mir jetzt noch jemand sagen, wie ich die id bekomme? Was mich wundert ist, dass bei "echo $mysqli->insert_id;" nichts ausgespuckt wird (wird allerdings in die DB eingetragen).. allerdings brauche ich die id für das select-menü, damit das value-Attribut definiert wird.. das ist jetzt noch das einzige, was ich nicht so ganz auf die Reihe kriege.

  • Darf ich fragen, wie ich parseInt(data) einsetzen muss? Bin irgendwie bissl zu blöd *pfeif*

    Edit: Frag mich nicht wieso, aber jetzt kommt auf einmal die ID raus (also mit dem was ich vorher hatte).. also das, was ich will.. jetzt muss ich nurnoch schaun, wie ich den Rest in Griff bekomm^^ Danke ;)

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

  • Ok.. irgendwie doch nicht so ganz..:

    Quellcode

    1. val = $.post("teilnehmer.php", {do: "new_verein", name: new_verein}).done(function(data) { alert("Data Loaded: " + data); return data; });
    3. alert(val);
    5. if (new_verein != null){
    6. $('.verein').append($('<option>')
    7. .attr("value", val)
    8. .attr("selected", false)
    9. .text(new_verein));
    11. $(this).append($('<option>')
    12. .attr("value", val)
    13. .attr("selected", true)
    14. .text(new_verein));
    17. }
    Alles anzeigen


    Bei dem alert direkt nachdem die php-Seite aufgerufen wurde steht da die id drin. Bei dem zweiten alert steht [object Object] drin. Und in dem select-Teil wird das value nicht gesetzt. Wenn ich die variable val für den value- und alert-teil mit data austausch, spinnt das Script völlig.. wie geht das jetzt? :whistling:

  • Moin!

    Dein Problem ist, dass der Rückgabewert aus deiner Callbackmethode nicht in der val Variable ankommt. Du kannst aus den Callbacks keine Daten zurückgeben, du musst das über Closures zuweisen. Zum Beispiel so:

    Quellcode

    1. var val = 0;
    3. $.post("teilnehmer.php", {do: "new_verein", name: new_verein}).done(function(data) {
    4. alert("Data Loaded: " + data);
    5. val = parseInt(data);
    6. });
    8. alert(val);


    Viel Erfolg damit!
    Bodo06

  • Ah nice, Danke für den Hinweis, das wollte ich dir noch nahelegen. :)

    Dein Problem heißt Asynchron. AJAX steht für Asynchronous JavaScript and XML. Das bedeutet, dass er den Ajax Request parallel ausführt, sofern man das bei JavaScript so bezeichnen kann. Das Problem bei deinem Code ist, dass das schief laufen kann, wenn der AJAX Request zu lange dauert. Wenn du dem vorbeugen willst, schmeiss einfach den ganzen abhängigen Code mit in den Callback rein. Dann kannst du dir auch den Clusure sparen. ;)

    VG Bodo06

  • Bodo06 schrieb:

    Ah nice, Danke für den Hinweis, das wollte ich dir noch nahelegen. :)


    Kein Ding und Danke^^

    Bodo06 schrieb:

    Dein Problem heißt Asynchron. AJAX steht für Asynchronous JavaScript and XML. Das bedeutet, dass er den Ajax Request parallel ausführt, sofern man das bei JavaScript so bezeichnen kann.


    Davon hab ich schonmal was gelesen und mir nix bei gedacht.. jetzt merk ich das Ausmaß der Auswirkungen.. :D

    Bodo06 schrieb:

    Das Problem bei deinem Code ist, dass das schief laufen kann, wenn der AJAX Request zu lange dauert. Wenn du dem vorbeugen willst, schmeiss einfach den ganzen abhängigen Code mit in den Callback rein. Dann kannst du dir auch den Clusure sparen. ;)


    Also den Teil, der die neue option in den select einlinkt, dahin wo jetzt der alert- und parseInt-Teil ist?

  • Fipsi schrieb:

    Also den Teil, der die neue option in den select einlinkt, dahin wo jetzt der alert- und parseInt-Teil ist?


    Korrekt. :)

    z.B.:

    Quellcode

    1. $.post("teilnehmer.php", {do: "new_verein", name: new_verein}).done(function(data) {
    2. alert("Data Loaded: " + data);
    3. var val = parseInt(data);
    5. if (new_verein != null){
    6. $('.verein').append($('<option>')
    7. .attr("value", val)
    8. .attr("selected", false)
    9. .text(new_verein));
    11. $(this).append($('<option>')
    12. .attr("value", val)
    13. .attr("selected", true)
    14. .text(new_verein));
    15. }
    16. });
    Alles anzeigen


    VG Bodo06

  • Wegen dem Asynchron nochmal:
    Kann man das irgendwie "umgehen"? Z. B. dass man eine Schleife einbaut, dass erst eine halbe Sekunde später der Wert in den select-Teil übergegen wird? Weil langsam hängt der Server bei den Daten ein bisschen durch.. ich konnte das zwar erst mit einem alert unterbinden, also dann wars noch schnell genug, aber jetzt wirds zu langsam.. da kommt nichts mehr :-/

  • mh.. also ich hab das jetzt soweit umgebaut.. aber kannst du mir sagen, was bei url rein gehört..? bin irgendwie bissl zu blöd dafür.. :/

    Edit: Ok, ich habs jetzt im GET-weg hinbekommen.. ich hätte es aber gerne über POST.. wie kann ich die Daten über Post übergeben in der Ajax-Funktion?

    Edit 2: Wer suche, der finde (nach ner gefühlten Ewigkeit durch google) :

    Quellcode

    1. $.ajax({type: "POST",
    2. url: "teilnehmer.php",
    3. data: {do: "new_verein", name: new_verein},
    4. async: false,
    5. success: function(data){
    7. val = parseInt(data);
    9. alert(new_verein+" wurde eingetragen");
    11. if ((val != "default")&&(val != null))
    12. {
    14. if ($('.verein').attr("name").split("_") == x)
    15. {
    16. $(this).append($('<option>')
    17. .attr("value", val)
    18. .attr("selected", true)
    19. .text(new_verein));
    20. }
    21. else
    22. {
    23. $('.verein').append($('<option>')
    24. .attr("value", val)
    25. .attr("selected", false)
    26. .text(new_verein));
    27. }
    28. }
    29. }
    30. });
    Alles anzeigen


    Jetzt ist nurnoch ein Fehler in der letzten if-Abfrage.. kann mir jemand sagen, wie ich den rauskrieg? auf den oberen Teil springt er nie an, er macht immer nur den else-Teil.

    Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von Fipsi ()