在循环中将值传递给Jquery对话框

时间:2012-09-04 20:27:44

标签: php jquery-ui

我想使用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>

1 个答案:

答案 0 :(得分:1)

首先:永远不要在while循环中使用id,因为你不能在同一页面上使用两个相同的id。你可以使用课程。 您可以使用您的此代码:

<img src="/icons/16/note.png" title="View employee note" alt="View employee note" class="jui-dialog-mdl-btn">
<input type="hidden" value="<?=$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
});

当然你的实现可能会有所不同,但我希望你在这里有足够的片段