Javascript 带有PHP输入的jQuery对话框窗口

我手上的场景是，我有一个PHP生成的表，其中包含从页面上显示的数据库中获取的多行。每一行都有一个唯一的ID。我希望能够添加编辑每一行的功能

到目前为止，我使用这个对话框来创建一个对话框弹出窗口，它与一个静态按钮一起工作（在动画示例中它就是这样工作的）

简单地说，我希望能够单击行中的任意位置来触发对话框，并使用jQuery将唯一ID传递给PHP文件以生成对话框的内容

<script>
        $(function() {
            $( "#dialog" ).dialog({
                autoOpen: false,
                show: {
                    effect: "fade",
                    duration: 100

                },
                hide: {
                    effect: "fade",
                    duration: 100
                }
            });

            $( "#opener" ).click(function() {
                $( "#dialog" ).dialog( "open" );

                var id = <somehow fetch the ID through a form or class within a span or somehow!>;
                var dataString = 'id=' + id;

                $.ajax({
                    type: "POST",
                    url: "edit.php",
                    data: dataString,
                    success: function(response) {
                        $('.ui-dialog-content').html(response);
                    }
                });
                return false;
            });
        });
    </script>

到目前为止，我尝试在对话框中显示内容

<script>
        $(function() {
            $( "#dialog" ).dialog({
                autoOpen: false,
                show: {
                    effect: "fade",
                    duration: 100

                },
                hide: {
                    effect: "fade",
                    duration: 100
                }
            });

            $( "#opener" ).click(function() {
                $( "#dialog" ).dialog( "open" );

                var id = <somehow fetch the ID through a form or class within a span or somehow!>;
                var dataString = 'id=' + id;

                $.ajax({
                    type: "POST",
                    url: "edit.php",
                    data: dataString,
                    success: function(response) {
                        $('.ui-dialog-content').html(response);
                    }
                });
                return false;
            });
        });
    </script>

$（函数（）{
$（“#对话框”）。对话框({
自动打开：错误，
展示：{
效果：“褪色”，
持续时间：100
},
隐藏：{
效果：“褪色”，
持续时间：100
}
});
$（“#开场白”）。单击（函数（）{
$（“对话框”）。对话框（“打开”）；
变量id=；
var dataString='id='+id；
$.ajax({
类型：“POST”，
url:“edit.php”，
数据：dataString，
成功：功能（响应）{
$（'.ui对话框内容'）.html（响应）；
}
});
返回false；
});
});

简单地总结一下我的问题，我无法让行触发对话框，即使我添加了

…

，它仍然没有打开，另一个问题是在PHP脚本中传递一个唯一的ID（名为

$db_ID

），该PHP脚本通过打开对话框将每一行生成到AJAX脚本中

<script>
        $(function() {
            $( "#dialog" ).dialog({
                autoOpen: false,
                show: {
                    effect: "fade",
                    duration: 100

                },
                hide: {
                    effect: "fade",
                    duration: 100
                }
            });

            $( "#opener" ).click(function() {
                $( "#dialog" ).dialog( "open" );

                var id = <somehow fetch the ID through a form or class within a span or somehow!>;
                var dataString = 'id=' + id;

                $.ajax({
                    type: "POST",
                    url: "edit.php",
                    data: dataString,
                    success: function(response) {
                        $('.ui-dialog-content').html(response);
                    }
                });
                return false;
            });
        });
    </script>

提前谢谢

---

编辑：可能值得注意的是，我对javascript/jQuery知之甚少，因此请用最简单的术语解释与之相关的一切，并给出示例！：）

检查和之间的区别

您可以在标记中使用自定义数据属性来存储所需的任何信息：

...

以及相应的javascript：

$（文档）.ready（函数（）{
$（'.row'）。单击（函数（）{
var id=$（this.attr（'data-id'）；
console.log（id）；//将id打印到控制台
//或者将ID发送到php脚本（您将在其中运行
//int_val（）验证它是否为整数！）
});
});

这就解决了span/ID问题

我会通过上面的示例代码来监听对

的任何点击。给它一个类或给父包装器一个类，并监听

.parent class tr

上的单击。如果你需要的话，我可以修改它，使之更有用。

如果你把它作为html:blahblah
If you had this as html: <tr class="opener" id="phpid"><td>blah</td><td>blah</td></tr>

$('tr.opener td').click(function() {
    var phpid = $(this).parent(tr).attr(id);
    // do your ajax
    });

$（'tr.opener td'）。单击（函数（）{
var phpid=$（this.parent（tr.attr）（id）；
//做你的ajax
});

---

我没有在

上设置单击功能的原因是，有时它完全被

的内部覆盖，并且不会触发单击功能。

如果我没有错，您使用的是jQuery UI对话。它应该像你提到的那样工作。如下面的HTML示例：

<tr class="opener" data-id="1">...</tr>
<tr class="opener" data-id="2">...</tr>
<tr class="opener" data-id="3">...</tr>

<div id="dialog_1" title="Dialog Title" style="display:none"> Some text</div>  
<div id="dialog_2" title="Dialog Title" style="display:none"> Some text</div>  
<div id="dialog_3" title="Dialog Title" style="display:none"> Some text</div>  

。。。
...
...
一些文本
一些文本
一些文本

以下是脚本示例：

<script>
    $(document).ready(function () {
        $('.opener').click(function () {
            var id = $(this).data('id');// here you get the unique id which you can use
            $('#dialog_'+id).dialog('open');
            return false;
        });
    });
</script>

$（文档）.ready（函数（）{
$（'.opener'）。单击（函数（）{
var id=$（this.data（'id'）；//这里您可以得到您可以使用的唯一id
$（'#dialog'+id）.dialog（'open'）；
返回false；
});
});

假设页面上有以下html表格：

<table id="opener">
    <tr id="row1">
        <td>one</td>
        <td>two</td>
        <td>three</td>
    </tr>
    <tr id="row2">
        <td>three</td>
        <td>four</td>
        <td>five</td>
    </tr>
</table>

在这种情况下，“tr”元素上的任何单击事件都将冒泡到id为“opener”的表中。在事件处理程序中，这将引用已单击的元素，以便您可以获取行的id。注意，您也可以使用.click事件，但是在创建.click事件时，表必须存在于DOM中。如果在连接事件后生成表，则使用上述方法也会起作用

另外，在对您的PHP页面进行AJAX调用时，我会使用如下内容：

$.ajax({
    url: edit.php,
    type: "POST",
    data: {
        id: id
    },
    success: function(response) {
        $('.ui-dialog-content').html(response);
    }
});

然后，在PHP中，您应该能够通过以下方式访问id：

$rowid = null;
if(isset($_POST["id"])) {
    $rowid = $_POST["id"];
}

---

您使用的是哪个版本的jQuery？如果您希望能够单击某些内容，应该使用bind。如果你想点击某个东西，你应该使用click。我知道，文档中另有说明，但浏览器对此的解释不同。阅读这两页可以解释这一点。我不知道这与我的问题有什么关系。请参见：

$（）。click（fn）

是

$（）的缩写。bind（'click'，fn）

。这并不能真正回答问题。@CharlieS，没错。然而，根据个人经验：在Internet Explorer中，单击通常不起作用。Bind总是起作用的。为了简单起见，我将使用第一个选项。但是我应该在哪里插入jQuery代码呢？jQuery应该放在文档中的某个地方。您可以通过

标记将其内联或包含在一个.js文件中。你的电话。我将修改示例代码，以确保它在窗口准备就绪时运行

console.log（）

只允许您在Chrome或Firefox中的Firebug控制台中查看结果。我推荐Chrome–单击gear»tools»javascript控制台，您将看到输出打印在那里。在您进行编辑之前，我计算出了您的编辑：P，但这正是我所需要的！感谢您的帮助：）我如何将一个变量从PHP传递给它？我将它设置为上的id，您需要知道这在PHP中是如何工作的吗？不，我完全理解PHP，只是不理解javascript是如何引用它的。对JS来说还是有点陌生。你也可以像其他答案中建议的那样使用“data where”属性，但重要的是将你单击绑定到

，或者有时它会在绑定到

时不触发