user4271704 user4271704 - 2 months ago 13
jQuery Question

How to confirm a db row deletion with jQuery UI dialog?

I use this jQuery UI for confirmation dialog for logout:

$(function() {
$("#opener").click(function() {
$("#dialog").dialog({
resizable: false,
height: "auto",
width: 400,
modal: true,
buttons: {
"Logout": function()
{
location = "logout.php";
},
Cancel: function()
{
$(this).dialog( "close" );
}
}
});
});
});

<img src="cross.png" border="0" alt="Logout" id="opener" />
<div id="dialog" title="Logout">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:12px 12px 20px 0;"></span>
logout?
</p></div>


It works fine, but:

I have a table that all rows come from database. Each row has a cross icon linked to
?action=delete&id=x

X is the row id in database.
when creating a table with
foreach()
data fetched from db, I have this in a column of each row to confirm row deletion:

<a href="<?=$_SERVER['PHP_SELF']?>?action=delete&amp;id=<?=$user['id']?>" onclick="return confirm('Are you sure you want to delete?')">
<img src="cross.png" width="16" height="16" alt= "Delete" border="0" />
</a>


I want to migrate with jQuery dialog. After confirm, how to set location with something like blah.php?action=delete&id=94

94 is id of the row in database. In sample above redirecting to just logout.php is easy, but:
1) How to pass the value of $user['id'] to append it to the location url?
2) As this is in foreach() how to avoid the same jQuery UI function again and again?

Answer

Here is what I would advise, using a basic example.

My Working example: https://jsfiddle.net/Twisty/mafnxaxq/

HTML

<div class="header">
  <img src="cross.png" border="0" alt="Logout" id="opener" />
</div>
<div class="content">
  <table>
    <thead>
      <tr>
        <th>Data</th>
        <th>Action</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Table Data Row 1</td>
        <td class="actions">
          <span data-id="1" class="ui-icon ui-icon-minus remove" title="Delete"></span>
        </td>
      </tr>
      <tr>
        <td>Table Data Row 2</td>
        <td class="actions">
          <span data-id="2" class="ui-icon ui-icon-minus remove" title="Delete"></span>
        </td>
      </tr>
      <tr>
        <td>Table Data Row 3</td>
        <td class="actions">
          <span data-id="3" class="ui-icon ui-icon-minus remove" title="Delete"></span>
        </td>
      </tr>
      <tr>
        <td>Table Data Row 4</td>
        <td class="actions">
          <span data-id="4" class="ui-icon ui-icon-minus remove" title="Delete"></span>
        </td>
      </tr>
    </tbody>
  </table>
</div>
<div id="dialog">
  <p><span class="ui-icon ui-icon-alert" style="float:left; margin:12px 12px 20px 0;"></span> Are you sure?
  </p>
</div>

jQuery

$(function() {
  $("#dialog").dialog({
    autoOpen: false,
    resizable: false,
    height: "auto",
    width: 400,
    modal: true
  });

  $("#opener").click(function() {
    $("#dialog").dialog("option", "buttons", [{
      text: "Logout",
      click: function() {
        location = "logout.php";
      }
    }, {
      text: "Cancel",
      click: function() {
        $(this).dialog("close");
      }
    }]);
    $("#dialog").dialog("option", "title", "Logout");
    $("#dialog").dialog("open");
  });

  $(".remove").click(function() {
    var rowId = parseInt($(this).data("id"));
    $("#dialog").dialog("option", "buttons", [{
      text: "Delete",
      click: function() {
        window.location.href = "<?=$_SERVER['PHP_SELF']?>?action=delete&id=" + rowId;
      }
    }, {
      text: "Cancel",
      click: function() {
        $(this).dialog("close");
      }
    }]);
    $("#dialog").dialog("option", "title", "Confirm Delete");
    $("#dialog").dialog("open");
  });
});

Here you can see how we use the same Dialog for multiple actions. When we click a specific button, we can change the resulting buttons, title, and functions.