在循环中向Jquery对话框传递值 - Passing a value to Jquery dialog when in a loop

Passing a value to Jquery dialog when in a loop

本文关键字：对话框 Jquery 循环 | 更新日期: 2023-09-27

我想使用Jquery对话框在具有从数据库调用的多行的页面上显示注释-每行都将有一个链接来显示一个对话框，该对话框应显示该行的相关内容。

该对话框运行良好，但我无法让它从链接中获取值，这样我就可以在对话框显示的div中查询数据库。

当有人点击图像时，我希望它显示该行的注释——这是我迄今为止的代码。我知道我没有发送值，因为我不知道如何发送-我如何将行id附加到每行的图像上，然后在对话框打开时使其在对话框中可用，以便显示注释？

<script>
$(function() {
        $("#jui-dialog").dialog({
    autoOpen: false, 
    title: "Note", 
    modal: true, 
    width: "640", 
    buttons: [{
            text: "Close note", 
            click: function() {
                $( this ).dialog( "close" );
            }}]
});
    $("#jui-dialog-mdl-btn").bind("click", function(event) {
    $("#jui-dialog").dialog("option", {modal: true}).dialog("open");
    event.preventDefault();
});
});
</script>
<while begins>
<img src="/icons/16/note.png" title="View employee note" alt="View employee note" id="jui-dialog-mdl-btn">
<input type="hidden" value="<?=$id?>">
<while ends>

                        <div id="jui-dialog">
                            <div class="dialog-inner">
                                <?php                                   
                                $query=mysql_query("SELECT content from notes WHERE id='$id'");
                                $count=mysql_num_rows($query);
                                $row=mysql_fetch_array($query);
                                $note=$row['content'];
                                print $note;
                                ?>
                            </div>
                        </div>

首先：永远不要在while循环中使用id，因为不能在同一页上使用两个相同的id。不过你可以使用class。你可以使用你的这个代码，：

<img src="/icons/16/note.png" title="View employee note" alt="View employee note" class="jui-dialog-mdl-btn">
<input type="hidden" value="<?=$id?>">

获取员工id：

$('.jui-dialog-mdl-btn').click(function() {
        var id = $(this).next('input').val();
        //process whatever you like
});

要接收想要显示的数据，可以使用这样的隐藏div：

<img src="/icons/16/note.png" title="View employee note" alt="View employee note" class="jui-dialog-mdl-btn">
<input type="hidden" value="<?=$id?>">
<div class="dialoginfo" style="display:none;"><!--code to show in your dialog--></div>

然后在jquery中：

$('.jui-dialog-mdl-btn').click(function() {
    var id = $(this).next('input').val();
    $(this).next('.dialoginfo').dialog(/*options*/);
    //process whatever you like
});

当然，您的实现可能会有所不同，但我希望您在这里有更多的片段