Question

我使用此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" 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>

它工作正常，但是：

我有一个表，所有行都来自数据库。每行都有一个链接到?action=delete&id=x的十字图标 X是数据库中的行ID。当创建一个从db中获取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" width="16" height="16" alt= "Delete" border="0" />
</a>

我想使用jQuery对话框进行迁移。确认之后，如何使用blah.php？action = delete＆amp; id = 94

等设置位置

94是数据库中行的id。在上面的示例中，重定向到logout.php很简单，但是： 1）如何传递$ user [＆＃39; id＆＃39;]的值以将其附加到位置网址？ 2）因为这是在foreach（）中如何一次又一次地避免相同的jQuery UI功能？

Answer 1

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

我的工作示例：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");
  });
});

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

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

1 个答案: