当前位置: 动力学知识库 > 问答 > 编程问答 >

javascript - Delete an image only when user clicks in my "yes" link of my own dialog

问题描述:

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

});

});

});

网友答案:
  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"); }); });

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

分享给朋友:
您可能感兴趣的文章:
随机阅读: