Dynamisch generierte Buttons zum Entfernen von Listeneinträgen

Hallo,

ich habe ein div

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

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

<?php 
    If (isset($_SESSION['filme'])) {
        For ($i = 0; $i <= count($_SESSION['filme']) - 1; $i++) {
            print_r($_SESSION['filme'][$i]);
            echo
                '
                <button id="entfernenbutton" value="'.$i.'">x</button>
                <br>
                ';
        }
    }
?>

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:

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

Hier der PHP Code:

<?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?

Hallo Sempervivum,

danke für deine Antwort.

Ich habe nun in "listeaktualisieren.php"

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

geändert in

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

und im jQuery-Code

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

geändert in

$('.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.)

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?

$(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)?

$(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:

<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:

$(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?

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:

            <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!