Dynamisch generierte Buttons zum Entfernen von Listeneinträgen

  • Hallo,


    ich habe ein div

    PHP
    <div id="liste">
        <?php
            include 'listeaktualisieren.php';
        ?>
    </div>

    in dem die Array-Einträge der Session Variable "filme" ausgegeben werden.

    Dabei erhält jeder Eintrag einen Button, um ihn zu löschen. Der Wert jedes dieser Buttons entspricht der Position des Eintrags im Array.


    Bei Klick auf einen der Buttons wird mittels jQuery eine weitere PHP Datei ausgeführt. Hier der jQuery Code:

    Code
    $(document).ready(function() { 
        $('#entfernenbutton').click(function() { 
            var button = $(this);
            $('#liste').load('elementauslisteentfernen.php', {
                nummerElement: button.val()
            }); 
        }); 
    });

    Hier der PHP Code:

    PHP
    <?php
        session_start();
    
        array_splice($_SESSION['filme'], $_POST['nummerElement'], 1);
    
        include 'listeaktualisieren.php';
    ?>

    Soweit dazu was passieren sollte. Tatsächlich passiert: Ein Eintrag wird nur gelöscht, wenn auf den Button des ersten Eintrags geklickt wird und bisher noch kein Eintrag gelöscht wurde.


    Wo liegt der Fehler und wie korrigiere ich ihn am besten?

  • Der Fehler liegt darin, dass Du allen Buttons jeweils die selbe ID zuweist. Eine ID darf es jedoch im Dokument nur einmal geben. Verwende statt dessen eine Klasse und es sollte besser funktionieren.

  • Hallo Sempervivum,


    danke für deine Antwort.


    Ich habe nun in "listeaktualisieren.php"


    Code
    <button id="entfernenbutton" value="'.$i.'">x</button>

    geändert in

    Code
    <button class="entfernenbutton" value="'.$i.'">x</button>

    und im jQuery-Code

    Code
    $('#entfernenbutton').click(function() {

    geändert in

    Code
    $('.entfernenbutton').click(function() {

    Jedoch passiert immer noch nicht das, was passieren sollte. Tatsächlich passiert nun: Ein Eintrag wird nur gelöscht, wenn bisher kein Eintrag gelöscht wurde. (Was sich gelöst hat ist, dass nun jeder Eintrag gelöscht werden kann.)

  • Hm, ich glaube mich zu erinnern, dass jQuery automatisch alle Elemente berücksichtigt wenn man so etwas auf eine Klasse macht. Ich untersuche das mal ...

    Was zuverlässig funktionieren sollte, ist das Eventbubbling:

    Code
    $('#liste').on('click, '.entfernenbutton', function() {

    (ungetestet)

  • PS: Ich hätte gleich richtig lesen sollen: Das Löschen funktioniert ja jetzt für alle Buttons. Das verbleibende Problem dürfte sein, dass durch das neue Aktualisieren der Liste alle Eventlistener verloren gehen. Auch dies sollte jedoch behoben werden, wenn Du auf das Eventbubbling setzt.

  • Okay, ich bin neu in jQuery und Javascript und habe bisher noch nicht mit Eventbubbling gearbeitet. Also was ich nach kurzer Google-Recherche verstanden habe ist, dass hier im Beispiel nun jedem Element mit der Klasse "entfernenbutton", das in dem Element "liste" ist, die Funktion zugewiesen wird.


    Das heißt, ich kann Folgendes machen?

    Code
    $(document).ready(function() { 
        $('#liste').on('click, '.entfernenbutton', function() { 
            $(this).load('elementauslisteentfernen.php', {
                nummerElement: nummerElement
            }); 
        });
    });

    Die andere Frage, die ich noch habe: Wie komme ich an den Wert des geklickten Buttons (um ihn dann zu übergeben)?

  • Für diese Methode gibt es eine gute Doku von jQuery:

    https://learn.jquery.com/events/event-delegation/


    Zitat

    Wie komme ich an den Wert des geklickten Buttons

    Das ist beim Bubbling nicht anders als beim bisherigen Code: Der geklickte Button steht unter $(this) zur Verfügung und Du kannst den Wert auslesen:

    Code
    $(document).ready(function() { 
        $('#liste').on('click, '.entfernenbutton', function() { 
            $(this).load('elementauslisteentfernen.php', {
                nummerElement: $(this).val();
            }); 
        });
    });
  • Code
    $(document).ready(function() { 
        $('#liste').on('click', '.entfernenbutton', function() { 
            $('#liste').load('elementauslisteentfernen.php', {
                nummerElement: $(this).val()
            }); 
        });
    });

    Vielen Dank!

  • Hallo,


    bei meiner weiteren Arbeit mit dem Code ist noch eine Frage aufgekommen. Sie steht in sehr enger Verbindung mit dem bisherigen Thema, daher schreibe ich nochmal hier rein. Ich möchte die Liste, die ich bisher nur in index.php verwendet habe, nun auch noch in einer anderen PHP-Datei verwenden. Die Liste habe ich auch in dieser mit dem folgenden Code eingefügt:


    PHP
    <div class="liste">
        <?php
            include 'listeaktualisieren.php';
        ?>
    </div>

    Die ID habe ich inzwischen in eine Klasse "liste" geändert. Der jQuery Code sieht entsprechend so aus:


    Code
    $(document).ready(function() { 
        $('.liste').on('click', '.entfernenbutton', function() { 
            $('.liste').load('elementauslisteentfernen.php', {
                nummerElement: $(this).val()
            }); 
        });
    });


    Die Buttons funktionieren in der neuen Datei jedoch garnicht. Was muss ich tun, damit die Buttons auch dort funktionieren?

  • Wenn Du schreibst, sie funktionieren gar nicht ist das sicher so zu verstehen, dass überhaupt nichts passiert beim Klick. Mache ich eine einfache Testdatei, funktioniert alles einwandfrei.


    Ich vermute, dass der Fehler anderswo liegt.

  • die Liste, die ich bisher nur in index.php verwendet habe, nun auch noch in einer anderen PHP-Datei verwenden.

    Ist die PHP Datei in einen Unterordner? , oder liegen alle Dateien im gleichen Ordner?

    Wird beim Klick auf den Button die

    elementauslisteentfernen.php Datei

    richtig geladen? Das kannst du in der Konsole sehen

  • Hallo,




    danke für eure Antworten.



    Zitat

    Wenn Du schreibst, sie funktionieren gar nicht ist das sicher so zu verstehen, dass überhaupt nichts passiert beim Klick.


    Genau das meine ich.


    Zitat

    Ist die PHP Datei in einen Unterordner? , oder liegen alle Dateien im gleichen Ordner?


    Alle Dateien sind im gleichen Ordner.


    Zitat

    Wird beim Klick auf den Button die elementauslisteentfernen.php Datei richtig geladen?


    Die elementauslisteentfernen.php Datei wird nicht geladen.


    Zitat

    Ich vermute, dass der Fehler anderswo liegt.


    Ich habe am Code nichts verändert, nur in der neuen Datei den Code aus #9 eingefügt.


    Ich habe überlegt, ob es wieder damit zusammen hängen kann, dass nicht alle Elemente berücksichtigt werden. Die Liste wird zuerst in index.php geladen. Über einen Button kommt man dann auf die andere Seite, in der die Liste erneut geladen wird.


    Wo könnte der Fehler denn sonst liegen?

  • Zitat

    Hast Du überhaupt das jQuery auch auf der neuen Seite ausgeführt? Es wirkt natürlich immer nur auf die aktuelle Seite.

    Man, das ist mir so peinlich! Ich habe die JS-Datei nicht verlinkt. Entschuldigung für die Mühe!

  • Hallo nochmal,


    ich habe noch eine Frage zu dem Thema. Ich habe die Liste in ein Formular gesteckt:


    PHP
                <form id="vv" method="post" action="vvausfuehren.php">
                    <div id="liste">
                        <?php
                            include 'listeaktualisieren.php';
                        ?>
                    </div>
                    <input type="submit" id="vvbutton" class="formelement" name="vvbutton" value="Okay">
                </form>


    Beim Klick auf den Entfernen-Button, der in listeaktualisieren.php geladen wird, wird nun wie gewollt elementauslisteentfernen.php in #liste geladen. Dann allerdings wird vvausfuehren.php in der ganzen Seite geladen (es wird sozusagen die Datei aus der action des Formulars geladen, so wie wenn man das Formular submittet). Wie muss ich den Code anpassen, dass nur elementauslisteentfernen.php in #liste geladen wird und vvausfuehren.php nicht?

  • Zitat

    Wie sehen denn deine Buttons aus? Wenn Du ein <button> Element genommen hast ist der Defaulttype "submit". Versuche, explizit type="button" anzugeben.

    Die Buttons hatten keinen Typ angegeben. Die Angabe als Button ist die Lösung! Vielen Dank!

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!