如何使用 jQuery UI 对话框确认数据库行删除？

Posted 2023-05-09

【中文标题】如何使用 jQuery UI 对话框确认数据库行删除？

【英文标题】：How to confirm a db row deletion with jQuery UI dialog?

【发布时间】：2017-01-19 05:20:31

【问题描述】：

我使用这个 jQuery UI 来确认退出对话框：

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

它工作正常，但是：

我有一个表，所有行都来自数据库。每行都有一个十字图标链接到?action=delete&id=x X 是数据库中的行 ID。 当使用从数据库中获取的foreach() 数据创建表时，我在每一行的列中都有这个以确认行删除：

<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"   alt= "Delete" border="0" />
</a>

我想使用 jQuery 对话框进行迁移。确认后，如何使用诸如 blah.php?action=delete&id=94 之类的设置位置

94 是数据库中行的 id。在上面的示例中，重定向到 logout.php 很简单，但是： 1) 如何传递 $user['id'] 的值以将其附加到位置 url？ 2) 由于这是在 foreach() 中，如何一次又一次地避免相同的 jQuery UI 函数？

【参考方案1】：

这是我的建议，使用一个基本示例。

我的工作示例：https://jsfiddle.net/Twisty/mafnxaxq/

HTML

<div class="header">
  <img src="cross.png" border="0"  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");
  );
);

在这里，您可以看到我们如何将同一个 Dialog 用于多个操作。当我们单击特定按钮时，我们可以更改生成的按钮、标题和功能。

【讨论】：

谢谢。我有一个包含几个独立 datePicker 的表单（不是开始/结束 datePicker 字段），如果我是正确的，我需要为每个表单设置一个单独的 datePicker js 代码，我想知道是否有一个技巧可以让一个 datePicker js 代码用于所有这些字段都选择了单独的日期？ @Twisty

@user4271704 这将类似于这里所做的。答案可能有点冗长，但是可以，您可以为每个字段分配 id 和 class 属性。例如，<input type="text" id="date_1" class="datepick" />，然后使用包含所有这些的选择器：$(".datepick").datepicker(); 或 $("input[id^='date_']").datepicker();。这通常包含您想要的所有选项。然后，您可以返回使用唯一选择器为每个选择器添加特定选项。也有一些方法可以改善这一点。

对不起，它现在工作正常，但由于我在 js 文件中有代码，它无法解释 $_SERVER['PHP_SELF'] 并且我被重定向到 %3C?=$_SERVER['PHP_SELF']?>?action=delete&id=94 有没有办法在没有硬编码的情况下解决它文件名？ @Twisty

加上之前的评论，我怎么能有一个单独的删除消息而不是注销？ @Twisty

@user4271704 捕获window.location like var SELF = window.location; 然后你可以在JS中使用它就像window.location.href = SELF + "?action=delete&id=" + rowId.