仅当用户单击我自己对话框的“是”链接时才删除图像

Question

I have a gallery with some images, and I have a link in each image to delete it:

<div class="galery"> 
  echo '<ul>';
  while ($result = $read->fetch(PDO::FETCH_ASSOC)){
    echo '<li id="'.$result['id'].'">';
    echo '<img src="'.$result['img'].'" />';
    echo '<a href="#" id="'.$resul['id'].'" class="galerydel">Delete</a>';
    echo '</li>';
      }
  echo '</ul>';
</div>

And then I have a jQuery script to delete my image using ajax: I get my id of each image an then I have my ajax $.post:

var url = 'deleteImages.php';
$('.galery ul').on('click','.galerydel',function(){
 var delid = $(this).attr('id');
 $.post(url,{action:'del_images',image:delid},function(){

 });
 return false;
});

And then I have my php.file, where I get my image id $imageId = $_POST['image']; and action $_POST['action']; and then I do my delete in my gallery table where id is = $imageId .

And this is working fine, but now I want to have a dialog message asking user if he have sure that wants to remove image, so I have a div for a dialog like this:

<div class="delete_dialog">
    <div class="delete">
        <p>Do you really want to delete this image?</p>
        <a href="#">Yes</a>
        <a href="#">No</a>
    </div>
</div>

And then I want to show this div when I click in my link to delete each image:

var url = 'deleteImages.php';
$('.galery ul').on('click','.galerydel',function(){
 var delid = $(this).attr('id');
 $('.delete_dialog').fadeIn("slow",function(){
        ('.delete').fadeIn("slow");
 });
 $.post(url,{action:'del_images',image:delid},function(){

 });
 return false;
}); ´

And now, when I click in my delete link Im open my dialog, but Im also removing my news without answer to my dialog.

Do you know how can I use my dialog, if I click in yes I do my delete, but If I click in no I just close my dialog?

Im reading about this for hours, and I just saw examples using jQuery dialog, and its easy because we can use buttons (yes and no).

And I also saw examples with if(confirm(Do you really want to delete this image?){my ajax here} and it is also easy to do.

But Im trying to do with my own dialog, and like this I really dont know how we can do this.

Can you please give me some help??

What Im trying:

var url = 'deleteImages.php';
$('.galery ul').on('click','.galerydel',function(){
 var delid = $(this).attr('id');
 $('.delete_dialog').fadeIn("slow",function(){
        ('.delete').fadeIn("slow");
 });
 $("a#delete").click(function(){
    $('.galerry ul li[id="'+ delid +'"]').css('background','red');
 $.post(url,{action:'del_images',image:delid},function(){
    window.setTimeout(function(){
        $('.galery ul li[id="'+ delid +'"]').fadeOut("slow");
    },500);
    $('.delete').fadeOut("fast",function(){
        $('.delete_dialog').fadeOut("fast"); 
    });
 });
 $("a#toggleDialog").click(function(){
   $('.delete').fadeOut("fast",function(){
        $('.delete_dialog').fadeOut("fast"); 
    });
});
});

Answer 1

1. Add some identificators to you "Yes/No" links (ids, attributes or something else):

   <div class="delete_dialog"> <div class="delete"> <p>Do you really want to delete this image?</p> <a href="#" id="delete">Yes</a> <a href="#" id="toggleDialog">No</a> </div> </div>

2. Add handler to links like:

   $("a#delete").click(function(){ //your post method }); $("a#toggleDialog").click(function(){ //hide dialog });

3. Change your open dialog handler to show dialog only:

   $('.galery ul').on('click','.galerydel',function(){ var delid = $(this).attr('id'); $('.delete_dialog').fadeIn("slow",function(){ ('.delete').fadeIn("slow"); }); });

PS also you should pass the delid variable to "Yes" handler.