jqueryui dialog inside php while loop not opening as expected

Question

i want to show jquery dialog on link click but when i click multiple dialog are opening instead of one.

i tried this but still not working.

if i use next() method then no dialog is opening as you can read in link above.

i think i should use data attribute but i don't know how to use it.

Here is my jqueryui dialog div content inside a php while loop:

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

and i am displaying it like this:

$(document).ready(function(){

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


});

Alex Odenthal · Accepted Answer · 2017-03-24 11:12:08Z

0

Your click listener simple opens them all as they do all have the class!

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

You need to have unique identifiers for opening the dialog. Assignment can be done by class. So I would go like this:

Give this line <div style='display: none;' class='post_reply_report_win'> a unique id like so <div style='display: none;' class='post_reply_report_win' id='post_reply_report_dialog_<?echo $i;?>';

$i would start at 1 and $i++ at the end in your loop.

your listener should then use .closest() from jquery to find the closest .post_reply_report_win element and get the id from that. that id is the one you pass to your .open call of the dialog.

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

answered Mar 24, 2017 at 11:12

Alex Odenthal

2111 silver badge11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Alex Odenthal Over a year ago

@user220095 please post your coding again or update your coding from the original question

mith · Accepted Answer · 2017-03-24 11:22:58Z

0

The id should be unique. id='view-reply' is inside while loop and it is repeating.

Try below code:

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

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

          return false;
});

answered Mar 24, 2017 at 11:22

mith

1,7001 gold badge10 silver badges13 bronze badges

Comments

Creator · Accepted Answer · 2017-03-25 16:42:01Z

i have solved it myself after a long research.

i am posting my solution here just to help others that are also searching for the solution :)

So here is the solution:

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>
										
  <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() { 
	
 var myID = $(this).attr("data-myid");
				
			$(".post_reply_report_win_"+myID).dialog({	
				
				modal	:	true,
				draggable	:	false,
				resizable	:	false,
				buttons:	[
								{ 
									text: "Cancel", 
									click: function () { 	
												$(this).dialog("close");	
											},
									style: "outline: none;"	
								}
							],
				close	:	function(event, ui){
								$(this).dialog("close");
							}			
				
	
			});

});

Collectives™ on Stack Overflow

jqueryui dialog inside php while loop not opening as expected

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related