Question

I have a data table setup (http://datatables.net/) and I am trying to have an option to delete a row from the table and have a jQuery dialog modal popup to confirm. However, the modal works fine on the first page of the table, but when the table goes to the 2nd page, the modal stops working. My guess is when the table paginates to the next 10 entries, something happens that removes the dialog click call.

Here is my code for the modal:

    $('#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");
    });

and here is my code for the modal:

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

Any idea why it works on the first page of the table, but not the 2nd?

Here is my delete code:

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

Answer 1

My guess is that you’re loading new elements that have not been bound with jquery. You could bind the new elements or attach a handler to you .delete_modal class like so.

$("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");
});