JQuery Undoable Plugin Demos

This page shows a demo of the jquery.undoable plugin. This is plugin provides a more usable alternative to confirmation dialogs by assisting in building user interfaces which allow undoing operations.

Read the blog post introducing this plugin for more details.

Other Demos

• TABLE Demo
• Double Row TABLE Demo
• DIV Demo

TABLE With multiple actions

This sample demonstrates how to use jquery.undoable with a table that supports multiple different undoable actions.

In this sample, we overload the plugin to add the css class of the anchor tag to the form data posted to the server. This specifies which action to do and undo. Of course, you can pull that info from anywhere you choose.

Notice that the status message changes based on which action you choose. In a real app, you might just have the changes come from the message returned by the server.

The Code

$(function() {
    $('td.action a').undoable({
        getPostData: function(clickSource, target) {
            var data = this.getPostData(clickSource, target);
            data.actionType = clickSource.attr('class');
            return data;
        },

        formatStatus: function(data) { 
            if(data.actionType === 'spam') {
                data.predicate = 'flagged as spam';
            }
            if(data.actionType === 'favorite') {
                data.predicate = 'added to favorites';
            }
            return this.formatStatus.call(this, data);
        }
    });
});

The Markup

<table class="comments">
    <thead>
        <tr>
            <th>title</th>
            <th>author</th>
            <th>date</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>This is an interesting plugin</td>
            <td>Bugs Bunny</td>
            <td>12/31/2009</td>
            <td class="action">
                <a href="#1" class="delete">delete</a>
                <a href="#1" class="spam">spam</a>
                <a href="#1" class="favorite">favorite</a>
            </td>
        </tr>
        <tr>
            <td>No, it's a bit derivative. But nice try.</td>
            <td>Derrida</td>
            <td>1/1/2010</td>
            <td class="action">
                <a href="#2" class="delete">delete</a>
                <a href="#2" class="spam">spam</a>
                <a href="#2" class="favorite">favorite</a>
            </td>
        </tr>
        <tr>
            <td>Writing sample data is no fun at all.</td>
            <td>Peter Griffin</td>
            <td>1/2/2010</td>
            <td class="action">
                <a href="#3" class="delete">delete</a>
                <a href="#3" class="spam">spam</a>
                <a href="#3" class="favorite">favorite</a>
            </td>
        </tr>
    </tbody>
</table>