2 votes

Datatables et modaux

J'ai configuré un tableau de données (http://datatables.net/) et j'essaie d'avoir une option pour supprimer une ligne du tableau et d'avoir une fenêtre modale de dialogue jQuery pour confirmer. Cependant, la modale fonctionne bien sur la première page du tableau, mais lorsque le tableau passe à la deuxième page, la modale cesse de fonctionner. Je pense que lorsque le tableau passe aux 10 entrées suivantes, il se passe quelque chose qui supprime l'appel au clic du dialogue.

Voici mon code pour la modale :

    $('#delete-dialog').dialog({
        autoOpen: false, 
        width: 400,
        modal: true
    });

    $('.delete_modal').click(function (e) {
        e.preventDefault();
        var targetUrl = $(this).attr("href");
        $('#delete-dialog').dialog({
          buttons: {
            "Delete": function() {
              window.location.href = targetUrl;
            },
            "Cancel": function() {
              $(this).dialog("close");
            }
          }
        });
        $('#delete-dialog').dialog("open");
    });

et voici mon code pour la modale :

<div id="delete-dialog" title="Remove User">
    <p>Are you sure you want to delete this user?</p>
</div>

Une idée de la raison pour laquelle cela fonctionne sur la première page du tableau, mais pas sur la seconde ?

Voici mon code de suppression :

<li><a href="?page=users&sub=admins&action=delete&id=<?=$row['id']?>" class="delete_modal"><span class="icos-trash"></span>Delete</a></li>

6voto

Matt Points 586

Je pense que vous chargez de nouveaux éléments qui n'ont pas été liés avec jquery. Vous pouvez lier les nouveaux éléments ou attacher un gestionnaire à votre classe .delete_modal comme ceci.

$("body").on("click", ".delete_modal", function (e) {
e.preventDefault();
        var targetUrl = $(this).attr("href");
        $('#delete-dialog').dialog({
          buttons: {
            "Delete": function() {
              window.location.href = targetUrl;
            },
            "Cancel": function() {
              $(this).dialog("close");
            }
          }
        });
        $('#delete-dialog').dialog("open");
});

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X