0

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>
4

1 に答える 1

1

まず第一に、同じページで 2 つの同一の ID を使用することはできないため、id を while ループで使用しないでください。ただし、クラスを使用できます。このコードを使用できます。

<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
});

もちろん、実装は異なる場合がありますが、ここに十分なスニペットがあることを願っています

于 2012-09-04T20:37:22.023 に答える