jQueryuiダイアログ（php whileループは期待通りに開けません）

Question

リンククリック時にjqueryダイアログを表示したいのですが、複数のダイアログをクリックすると1つではなく開きます。

私はthisを試しましたが、まだ動作していません。

私がnext（）メソッドを使用すると、上のリンクで読めるようにダイアログが開きません。

私はデータ属性を使うべきだと思いますが、私はそれをどのように使用するのか分かりません。ここで

はwhileループPHP内部の私jqueryuiダイアログdivの内容です：

while ($rows8 = $sql8->fetch_assoc()){ 
 

 
echo "<div id='view-reply'> 
 

 
    <span class='report_link'><a data-myid='$rows8[reply_id]' class='rp' href='javascript:void(0);'><img src='img/admin.png' alt='report to admin' title='report to admin'/></a></span> 
 
\t \t \t \t \t \t \t \t \t \t 
 
    <div style='display: none;' class='post_reply_report_win'> 
 
    <h4><span>Report to Admin</span><hr/></h4> 
 
    <form class='reportForm' method='post' action='report_process.php?uid=".urlencode(base64_encode($rows8['reply_by']))."&p=".urlencode(base64_encode($rows8['reply_to_post']))." '> 
 
    <p><span>Subject</span><br/> 
 
    <input type='text' name='reporttxt' maxlength='100' required autofocus /></p> 
 
    <p><span>Details</span><br/> 
 
    <textarea name='reportarea' maxlength='500' required ></textarea></p> 
 
    <p><input type='submit' name='reportsub' id='sub' value='Submit'/></p> 
 
    </form> 
 
    </div> 
 
</div> 
 
}

と私はこのようにそれを表示しています：

$(document).ready(function(){ 
 

 
    $(".post_reply_report_win").dialog({ 
 
\t \t \t \t \t \t \t 
 
\t \t modal \t : \t true, 
 
\t \t draggable \t : \t false, 
 
\t \t resizable \t : \t false, 
 
\t \t autoOpen \t : \t false, 
 
\t \t buttons: \t [ 
 
\t \t \t \t \t \t { 
 
\t \t \t \t \t \t \t text: "Cancel", 
 
\t \t \t \t \t \t \t click: function() { \t 
 
\t \t \t \t \t \t \t \t $(this).dialog("close"); \t 
 
\t \t \t \t \t \t \t }, 
 
\t \t \t \t \t \t \t style: "outline: none;" \t 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t ], 
 
\t \t close \t : \t function(event, ui){ 
 
\t \t \t \t \t \t $(this).dialog("close"); 
 
\t \t \t \t \t } \t \t \t 
 
\t \t \t 
 
\t }); 
 
    
 
    
 
    $("#view-reply .report_link a").click(function() { 
 
\t 
 
\t \t \t $(".post_reply_report_win").dialog("open"); 
 
\t \t \t \t 
 
\t \t \t return false; 
 
\t }); 
 

 

 
});

Answer 1

私は長い間研究した後、それを自分で解決しています。

私はちょうどので、ここも解決策を探している他の人:)

を助けるためにここに私の解決策を掲載していますがソリューションです：

PHP：

while ($rows8 = $sql8->fetch_assoc()){ 
 

 
    echo "<span class='post_reply_report_link'><a data-myid='$rows8[reply_id]' class='rp' href='javascript:void(0);'><img src='img/admin.png' alt='report to admin' title='report abuse'/></a></span> 
 
\t \t \t \t \t \t \t \t \t \t 
 
    <div class='post_reply_report_win_$rows8[reply_id]' id='post_reply_report_win' > 
 
    <h4><span>Report Abuse</span><hr/></h4> 
 
    <form class='post_reply_report_form' method='post' action='report_process.php?uid=".urlencode(base64_encode($rows8['reply_by']))."&p=".urlencode(base64_encode($rows8['reply_to_post']))." '> 
 
    <p><span>Subject</span><br/> 
 
    <input type='text' name='reporttxt' maxlength='100' required autofocus /></p> 
 
    <p><span>Details</span><br/> 
 
    <textarea name='reportarea' maxlength='500' required ></textarea></p> 
 
    <p><input type='submit' name='reportsub' id='sub' value='Submit'/></p> 
 
    </form> 
 
    </div>"; 
 

 
}

のjavascript：

$(document).ready(function(){ 
 

 
$(".post_reply_report_link a").click(function() { 
 
\t 
 
var myID = $(this).attr("data-myid"); 
 
\t \t \t \t 
 
\t \t \t $(".post_reply_report_win_"+myID).dialog({ \t 
 
\t \t \t \t 
 
\t \t \t \t modal \t : \t true, 
 
\t \t \t \t draggable \t : \t false, 
 
\t \t \t \t resizable \t : \t false, 
 
\t \t \t \t buttons: \t [ 
 
\t \t \t \t \t \t \t \t { 
 
\t \t \t \t \t \t \t \t \t text: "Cancel", 
 
\t \t \t \t \t \t \t \t \t click: function() { \t 
 
\t \t \t \t \t \t \t \t \t \t \t \t $(this).dialog("close"); \t 
 
\t \t \t \t \t \t \t \t \t \t \t }, 
 
\t \t \t \t \t \t \t \t \t style: "outline: none;" \t 
 
\t \t \t \t \t \t \t \t } 
 
\t \t \t \t \t \t \t ], 
 
\t \t \t \t close \t : \t function(event, ui){ 
 
\t \t \t \t \t \t \t \t $(this).dialog("close"); 
 
\t \t \t \t \t \t \t } \t \t \t 
 
\t \t \t \t 
 
\t 
 
\t \t \t }); 
 

 
});

Answer 2

あなたのクリックリスナーは、すべてがクラスを持っているので、それらをすべて開きます！

$(".post_reply_report_win").dialog("open"); 

ダイアログを開くための一意の識別子が必要です。割り当てはクラスごとに行うことができます。 だから私はこれのように行くだろう：

この行を与える<div style='display: none;' class='post_reply_report_win'>そう<div style='display: none;' class='post_reply_report_win' id='post_reply_report_dialog_<?echo $i;?>のような一意のID ';

$私はあなたのループの最後に1と$ i ++で始まります。

あなたのリスナーは、最も近い.post_reply_report_win要素を見つけて、そこからIDを取得するためにjqueryのから（）.closest使用する必要があります。 そのidはダイアログの.open呼び出しに渡すものです。

$('#'+$(this).closest('.post_reply_report_win').attr('id')).dialog("open"); 

Answer 3

idは一意である必要があります。 id='view-reply'はwhileループの中にあり、繰り返しています。

はコードの下に試してみてください。

$(".report_link a").click(function() { 

      $(this).parent('.report_link').next('.post_reply_report_win').dialog("open"); 

      return false; 
});