javascript - PHP - 将隐藏值传递到 jquery(第 2 部分)

标签 javascript php jquery html mysql

继续PHP - pass hidden value into the jquery

<html>
<head>
<link rel="stylesheet" href="js/jquery-ui-themes-1.11.1/themes/smoothness/jquery-ui.css" />
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.11.1/jquery-ui.js"></script>
<script>
$(document).ready(function(){
    $(".buttonsPromptConfirmDeleteDepartment").click(function(){
        $("#dialogConfirmDeleteDepartmentBox").dialog({
            modal: true,
            resizable: false,
            width: 300,
            height: 150,
            dialogClass: "dialogConfirmDeleteDialogBox",
            position: { my: 'top', at: 'top+300' },
            open: function() {
                var message = 'Are you sure you want to delete this department?';
                $(this).html(message);
            },
            buttons:
            [
                {
                    text: "OK",
                    click: function()
                    {
                        var departmentID = $(this).next('input.departmentID').val();
                        alert(departmentID);  
                    },
                    style:"margin-right: 60px;" 
                },
                { 
                    text: "Cancel",
                    click: function () 
                    {
                        $(this).dialog("close");  
                    }, 
                    style:"margin-left: 0px;" 
                },
            ]
        });
    });
});
</script>
</head>

<body>
<?php
//db connection

$query = "SELECT * 
          FROM department 
          ORDER BY dept_ID ASC";
$result = mysqli_query($dbc, $query);
$total_department = mysqli_num_rows($result);

if($total_department > 0)
{
?>

<table width="600" border="1" cellpadding="0" cellspacing="0" style="border-collapse:collapse">
  <tr>
    <td width="80" align="center">ID</td>
    <td width="300" align="center">Department</td>
    <td width="220" align="center">Action</td>
  </tr>   
<?php        
  while($row = mysqli_fetch_array($result))
  {
?>
    <tr>
      <td align="center"><?php echo $row['dept_ID']; ?></td>
      <td align="center"><?php echo $row['dept_name']; ?></td>
      <td>
        <button class="buttonsPromptConfirmDeleteDepartment">Delete</button>
        <div id="dialogConfirmDeleteDepartmentBox" title="Confirm"></div>
        <input type="hidden" class="departmentID" value="<?php echo $row['dept_ID']; ?>" />    
      </td>
    </tr>
  <?php
  }
  ?>
</table> 
<?php
}
?>

部门表

dept_ID     dept_name 
1           Account
2           Finance
3           Marketing

这次我在代码中添加了一个对话框。
假设我的部门表只有3条记录。
我的要求如下:
- 单击第一个删除按钮,显示对话框,单击确定,显示部门 ID = 1
- 单击第二个删除按钮,显示对话框,单击确定,显示部门 ID = 2
- 单击第三个删除按钮,显示对话框,单击确定,显示部门 ID = 3

但是,无论我单击哪个按钮,我都会得到未定义的值。

有人可以帮助我吗?

最佳答案

$(this) 位于

var departmentID = $(this).next('input.departmentID').val();

不引用您的 DOM 对象,而是引用当前对话框。

首先创建对 DOM 对象的引用,稍后您可以使用该引用:

$(document).ready(function(){
    $(".buttonsPromptConfirmDeleteDepartment").click(function(){

        var $box = $(this);

        ...
        ...

            click: function()
            {
                var departmentID = $box.parent().find('input.departmentID').val();
                alert(departmentID);  
            }

        ...
        ...

    });
});

关于javascript - PHP - 将隐藏值传递到 jquery(第 2 部分),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35426224/

相关文章:

javascript - 如何在 Javascript 代码中声明我的模式

php - 使用MCRYPT_RIJNDAEL_256的PHP加密库对应的Powershell模块是什么?

javascript - 我可以遍历 p 标签并更改为 ul 吗?

javascript - 为什么我的模块函数在 Node.js 中返回未定义?

javascript - JavaScript函数声明之间的区别?

php - PDO UTF-8 编码问题?

javascript - jQuery 类选择器问题

javascript - 没有图像时隐藏缩略图 div

jquery css() 自动供应商前缀不起作用?

javascript - 当时间改变时改变元素的 CSS 属性