Im deleting images from a gallery by clicking on image using jQuery and ajax.

And it is working fine, but now Im trying to do a message, like an alert asking if user have sure that really want to delete my image.

I know that I can use dialog form jquery user interface that have ok and cancel methods for this, but Im trying to use my own dialog for this.

But when I click in my image in my delete link my dialog is not appearing.

Do you see where can be my error?

My dialog that I want to show when I click in my delete link is this:

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

I have in my html my delete link like:

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

Then I have my script to show my dialog when I click in my delete:

$(function(){
  $('.galery ul').on('click','.galerydel',function(){
  $('.dialog .delete').fadeOut("slow");
   return false;
  });
});

Than I have my php, that gets my image id: $imageId = $_POST['image']; and then I will delete from my table gallery where id is icual to my $imageId.

Use this snippet,

Working Fiddle

$(function(){

  $('.galery').on('click','.galerydel',function(){
      $( ".dialog" ).dialog();
      return false;      //A better way is to use event.preventDefault()
  });
});

• You need to set .dialog to display:none initially.
• fadeOut() is used to hide. You have to show the dialog on Click of Delete.

more