带有编辑/删除表行的 jquery 模态对话框答案

【问题标题】：jquery Modal dialog with edit/delete for table rows带有编辑/删除表行的 jquery 模态对话框
【发布时间】：2011-03-01 16:48:36
【问题描述】：

这是我的目标：拥有一个带有编辑/删除按钮的数据表。编辑按钮打开一个模式对话框，其中预先填充了相应行的详细信息。我很难让 ajax 工作以实际填写表格，所以我只是在模态框内打开一个编辑页面并传递 id。它工作得很好......对于第一个编辑按钮。随后的编辑按钮上什么也没有发生。我不知所措。我不是 javascript 或 jquery 专家，但已经用谷歌搜索了，没有找到任何可以处理我的情况的东西（或者我可以成功适应）。我很确定它涉及 .each 和/或 .sibilngs，但我不确定如何实施。以下是所有代码，除了样式和一些用于验证用户的 PHP：

<link type="text/css" href="js/css/start/jquery-ui-1.8.9.custom.css" rel="stylesheet" />    
<!--<script type="text/javascript" src="js/js/jquery-1.4.4.min.js"></script>-->
<script type="text/javascript" src="js/jquery-1.5.1rc1.js"></script>
<script type="text/javascript" src="js/js/jquery-ui-1.8.9.custom.min.js"></script>

<script type="text/javascript">
//table highlights & such
$(document).ready(function() {
$(".striped tr").mouseover(function() {
$(this).addClass("highlight");
});
$(".striped tr").mouseout(function() {
$(this).removeClass("highlight");
});
$(".striped tr").toggle(function() {
$(this).addClass("selected");
}, function () {
$(this).removeClass("selected");
});
$(".striped tr:nth-child(odd)").addClass("odd");
});

$(function(){
    $('#edit_number').dialog({  autoOpen: false,width: 400,height: 500, modal:true, open: function() {
        var editqs = 'process.php?action=edit_num_form&id=' + $(this).data('num_id') + '&rep_id=<?php echo $rep_id ?>';
        $("#edit_number").load(editqs);
        }
    });

$('.edit_number_link').live('click', function() {
    var id = $(this).closest('tr').data('id');
    $("#edit_number").data('num_id', id).dialog('open');
    return false;
});


});

</script>
</head>

<body>
<table style="border: 1px solid #000;" border=1 cellpadding=0 cellspacing=0 class="striped">
  <thead>
    <tr style="background-color: #ccc;">
        <th align=left width=100>Name</th>
        <th align=left width=100>External</th>
        <th align=left width=100>Internal</th>
        <th align=left width=50>Options</th>
        <th align=left width=50>Hours</th>
        <th align=left width=150>Notes</th>
        <th colspan=2>&nbsp;</th>
    </tr>
  </thead>
<?php
//db connection stuff    
while($row = mysql_fetch_array($result))
  {
    $name = $row['name'];
    $external = $row['external'];
    $internal = $row['internal'];
    if ($internal == "")
      $internal = "&nbsp;";
    $options = $row['options'];
    if ($options == "")
      $options = "&nbsp;";
    $hours = $row['hours'];
    if ($hours == "")
      $hours = "&nbsp;";
    $comments = $row['comments'];
    if ($comments == "")
      $comments = "&nbsp;";
    $id = $row['id'];

  echo "<tr data-id=".$id."><td>" . $name . "</td>";
  echo "<td>" . build_link($external,$rep_id, "ext", $userfound) . "</td>";
  echo "<td>" . $internal . "</td>";
  echo "<td>" . $options . "</td>";
  echo "<td>" . $hours . "</td>";
  echo "<td>" . $comments . "</td>";
  //echo "<td><a href='process.php?action=edit_num_form&id=" . $id . "&rep_id=".$rep_id."' title='Edit'><img src='edit.png' alt='Edit' border='0'></a></td>";
  echo "<td><a href='#' title='Edit' class='edit_number_link'><img src='edit.png' alt='Edit' border='0'></a></td>";
  echo "<td><a href='process.php?action=delete_num&id=" . $id . "&rep_id=".$rep_id."' title='Delete'><img src='delete.png' alt='Delete' border='0'></a></td>";
  //echo "<td><a href='?action=delete' class='delete'>Delete</a></td>";
  echo "</tr>";
  }
echo "</table>";
mysql_close($con);
?>

<div id="edit_number" title="Edit Number">
</div>
</body>

</html>

因此，理想情况下，我可以从每个编辑按钮检索我的数据，以将表单加载到真正的模式（不是外部页面）中，但至少需要额外的实例才能工作。

任何帮助将不胜感激。谢谢！

【问题讨论】：

页面是否有脚本错误？
我希望。这至少会给我一个方向。但不，没有脚本错误。

标签： jquery jquery-ui dialog modal-dialog

【解决方案1】：

由于我看不到整个代码集...#edit_number_link 在#edit_number 中吗？如果是这样，您将需要使用 jQuery 的 live() 方法来绑定事件，因为 DOM 在初始页面加载后正在更新。

另外，您不需要attr('data-id')，因为jQuery 现在会将这些属性映射到.data() 方法。您需要 .data('id') 来检索此值。

另一件事是，当您应该使用课程时，您却使用了 ID。 ID 应该是唯一的并且只使用一次。您应该将#edit_number_link 更改为一个类，.edit_number_link。我不确定#edit_number 是哪个容器，但我假设只有一个。

$('.edit_number_link').bind('click', function() {
    var id = $(this).closest('tr').data('id');
    $("#edit_number").data('num_id', id).dialog('close').dialog('open');
    return false;
});

UPDATE 在看到代码并在 jsfiddle 上实际试用后，我发现发生的情况是，当您单击其他编辑链接时，对话框窗口已经打开并且没有触发它的开放回调。您需要做的是更新代码，以便对话框在您打开之前关闭。我上面的代码更新为包含.dialog('close')。另外，我已将live 改回bind，因为在这种情况下不需要它。

【讨论】：

感谢有关 attr 的信息，但您的更改现在也导致第一个链接无法操作。我将更新我的原始帖子并包含所有相关代码...
@jayhawkjoe，检查我更新的答案。你需要在打开它之前链接.dialog('close')。
爱它！就是这样。谢谢@mcherbie

【解决方案2】：

因为您有相同的 ID 'edit_number_link"，您应该尝试：

$("#edit_number_link").each(function() {
    $(this).click(function(){
          var id = $(this).closest('tr').attr('data-id');
           $("#edit_number").data('num_id', id).dialog('open');
        return false;
    });
});

或者类似的东西。

【讨论】：

感谢 Louskan，但您的更改没有任何影响。它的行为方式仍然相同。