Confirm Dialog funktioniert nur teilweise.

[Goethe]

Hallo!

Ich bin kein JS Experte und habe nur gelegentlich damit etwas zu tun. Bei "einfachen" Dingen komme ich gut zurecht. In meinem Projekt habe ich eine Tabelle, wo man News sehen kann.
Hier habe ich einige Optionen wie Editieren, Kopieren und Löschen eingebaut und bisher funktioniert es sehr gut. Nun wollte ich ein Confirm Dialog bauen, das abfragt, ob eine News gelöscht werden soll, oder nicht.
Das gute ist, bei nur einem Eintrag, kann ich die Dialogbox nutzen. Existieren mehrere Einträge, funktioniert es leider nicht mehr.

    $content = '';
    $hasEntry = false;

    $stmt = loadArticlesStatement();

    while ($article = $stmt->fetch(PDO::FETCH_ASSOC)) {
        $content .= '<tr>';
        $content .= '<td>' . $article['id'] . '</td>';
        $content .= '<td>' . strftime('%d.%m.%Y', $article['datetime']) . '</td>';
        $content .= '<td>' . $article['title'] . '</td>';
        $content .= $article['visibility'] > - 1 ? '<td> {yes}</td>' : '<td> {no}</td>';

        $content .= "<td><a href=" . $_SERVER['PHP_SELF'] . "?uri=articleedit&id=" . $article['id'] . ">"
            . '<img class="glyph-icon-16" src="../templates/default/admin/img/svg/si-glyph-edit.svg" title="{edit}"></a> &middot;';

        $content .= "<a href=" . $_SERVER['PHP_SELF'] . "?uri=articleedit&id=" . $article['id'] . ">"
            . '<img class="glyph-icon-16" src="../templates/default/admin/img/svg/si-glyph-document-copy.svg" title="{copy}"></a> &middot;';

        $content .= "<a href=/admin/articledel.php?id=" . $article['id'] . " id='dialog-confirm'>"
            . '<img class="glyph-icon-16" src="../templates/default/admin/img/svg/si-glyph-delete.svg" title="{delete}" onclick=""></a></td>';

        $content .= '</tr>';

        $content .= '<div id="dialog" title="{confirmation_required}">
                Are you sure about this?
            </div>';

        $hasEntry = true;
    } 

$(document).ready(function() {
    $("#dialog").dialog({
      autoOpen: false,
      modal: true,
      width: 500,
      height: 200
    });
  });

  $("#dialog-confirm").click(function(e) {
    e.preventDefault();
    var targetUrl = $(this).attr("href");

    $("#dialog").dialog({
      buttons : {
        "Confirm" : function() {
          window.location.href = targetUrl;
        },
        "Cancel" : function() {
          $(this).dialog("close");
        }
      }
    });

    $("#dialog").dialog("open");
  });

Das ist der Code. Der funktioniert nur bei einem Eintrag. Sobald mehrere Einträge existieren, funktioniert das ganze nur fehlerhaft bis gar nicht.

Was ist die Ursache und wo sollte ich nach einer Lösung suchen? Danke für die Tipps.

Mit freundlilchen Grüßen

[jonas3344]

Eine id muss einmalig sein. Wenn du mehrere News auf derselben Seite hast du mehrere Link-Elemente (<a>) mit der id 'dialog-confirm'.

Du müsstest den Dialog über den Klassennamen ansteuern (also <a href="..." class="dialog-confirm">) und in der id zum Beispiel die News-id abspeichern und die dann im JS-Teil abfragen.

[Goethe]

Es funktioniert. Statt

 
id='dialog-confirm'

musste ich

class='dialog-confirm'

verwenden und das entsprechend in der Funktion abgreifen.

Danke für deine Hilfe

[protestix]

onclick="" scheint ja nicht sehr sinnvoll, zudem ist das Javascript und sollte nicht im Markup stehen.
du verwendest ja schon die JavaScript-Bibliothek Jquery, schaue dort nach wie man das besser macht.

$_SERVER['PHP_SELF'] ist ein Sicherheitsrisiko und sollte man besser auch vergessen, dass es das gibt.
Baue es besser anders zusammen, z.B. mit $_SERVER['SCRIPT_NAME'].