Replace Rails Confirm Alert with A Double State Button

Question

Having a data-confirm tag in a link in Rails 3 generates the unobstructive Javascript needed to have an alert for confirmation. For example:

<%= link_to "Destroy", @product, :confirm => "Are you sure?", :method => :delete %>

However, I would like to change this behaviour to the following:

Clicking a button changes its text to 'Sure?' and then the user has to click it again for the action to take place. (perhaps the text can even go back to normal after a timeout)

Where is the best place to change this behaviour in a Rails 3.1 application? (BTW, I'm using Twitter Bootstrap in case there is a better solution that can work nicely this that).

Answer 1

So here is how you do it (this is based on Custom rails confirm box (with $.rails.confirm override))

This goes in your application.js if you want (Rails 3.1)

$.rails.confirm = function(message, element) 
{ 
    var state = element.data('state');
    var txt = element.text();
    if (!state)
    {
        element.data('state', 'last');
        element.text('Sure?');
        setTimeout(function()
        {
            element.data('state', null);
            element.text(txt);
        }, 2000);
        return false;
    }   
    else
    {
        return true;
    }
};

$.rails.allowAction = function(element) 
{
    var message = element.data('confirm'),
        answer = false, callback;
    if (!message) { return true; }

    if ($.rails.fire(element, 'confirm')) 
    {
        // le extension.
        answer = $.rails.confirm(message, element);
        callback = $.rails.fire(element, 'confirm:complete', [answer]);
    }
    return answer && callback;
};

$.rails.handleLink = function(link) 
{
    if (link.data('remote') !== undefined) 
    {
        $.rails.handleRemote(link);
    } 
    else if (link.data('method')) 
    {
        $.rails.handleMethod(link);
    }

    return false;
};