Rails destroy confirm with Jquery AJAX

Question

I have got this working for the most part. My rails link is:

<%= link_to(image_tag('/images/bin.png', :alt => 'Remove'), @business, :class => 'delete', :confirm => 'Are you sure?', :id => 'trash') %>

:class => "delete" is calling an ajax function so that it is deleted and the page isn't refreshed that works great. But because the page doesn't refresh, it is still there. So my id trash is calling this jquery function:

$('[id^=trash]').click(function(){
            var row = $(this).closest("tr").get(0);
            $(row).hide();
            return false;
});

Which is hiding the row of whatever trash icon i clicked on. This also works great. I thought I had it all worked out and then I hit this problem. When you click on my trash can I have this confirm box pop up to ask you if you are sure. Regardless of whether you choose cancel or accept, the jquery fires and it hides the row. It isn't deleted, only hidden till you refresh the page. I tried changing it so that the prompt is done through jquery, but then rails was deleteing the row regardless of what i choose in my prompt because the .destroy function was being called when the prompt was being called.

My question really is how can i get the value to cancel or accept from the rails confirm pop up so that in my jquery I can have an if statement that hides if they click accept and does nothing if they click cancel.

EDIT: Answering Question below. That did not work. I tried changing my link to:

<%= link_to(image_tag('/images/bin.png', :alt => 'Remove'), @business, :class => "delete",  :onclick => "trash") %>

and putting this in my jquery

function trash(){
if(confirm("Are you sure?")){
    var row = $(this).closest("tr").get(0);
    $(row).hide();
    return false;
} else {

//they clicked no. } }

But the function was never called. It just deletes it with no prompt and doesn't hide it. But that gave me an idea.

I took the delete function that ajax was calling

     $('a.delete').click (function(){
            $.post(this.href, {_method:'delete'}, null, "script");
            $(row).hide();
});

And modified it implementing your code:

remove :confirm => 'Are you sure?'

$('a.delete').click (function(){
        if(confirm("Are you sure?")){
            var row = $(this).closest("tr").get(0);
            $.post(this.href, {_method:'delete'}, null, "script");
            $(row).hide();
            return false;
        } else {
            //they clicked no.
            return false;
        }

});

Which does the trick.

Answer 1

You can remove the:

:confirm => 'Are you sure?'

and replace it with a custom onclick event, like so:

<%= link_to(image_tag('/images/bin.png', :alt => 'Remove'), @business, :class => 'delete', :onclick => 'someJSFunction', :id => 'trash') %>

Then, in your application.js (or any other JS file), do:

function someJSFunction(){
  if(confirm("Are you sure?"){
    //they clicked yes.
  } else {
    //they clicked no.
  }
}

Sorry I don't have time to test it right now, but that should work.

Answer 2

remove :confirm => 'Are you sure?'

$('a.delete').click (function(){
            if(confirm("Are you sure?")){
                var row = $(this).closest("tr").get(0);
                $.post(this.href, {_method:'delete'}, null, "script");
                $(row).hide();
                return false;
            } else {
                //they clicked no.
                return false;
            }

    });

Answer 3

Thanks guys, I used the following tutorial to set up jquery with rails:

http://www.notgeeklycorrect.com/english/2009/05/18/beginners-guide-to-jquery-ruby-on-rails/

when used in conjunction with this tutorial, I used the following code:

Query.fn.deleteWithAjax = function() {
    this.removeAttr('onclick');
    this.unbind('click', false);
    this.click(function() {
        if(confirm("Are you sure?")){
            $.delete_($(this).attr("href"), $(this).serialize(), null, "script");
            return false;
        } else {
            //they clicked no.
            return false;
        }
    })
    return this;
};