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

This demo shows off the typical usage of the plug-in with a table of comments as you might find in an admin section of a blog.

Click the delete link on the table row to see it in action.

title author date
This is an interesting plugin Bugs Bunny 12/31/2009 delete
No, it's a bit derivative. But nice try. Derrida 1/1/2010 delete
Writing sample data is no fun at all. Peter Griffin 1/2/2010 delete

The Code

For the purposes of the demo, we left the url null in the actual code, since I don&8217;t have an actual back-end service to post to.

$(function() {
    $('a.delete').undoable({url: 'http://example.com/delete/'});
});

The Markup

<table>
    <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><a href="#1" class="delete">delete</a></td>
        </tr>
        <tr>
            <td>No, it's a bit derivative. But nice try.</td>
            <td>Derrida</td>
            <td>1/1/2010</td>
            <td><a href="#2" class="delete">delete</a></td>
        </tr>
        <tr>
            <td>Writing sample data is no fun at all.</td>
            <td>Peter Griffin</td>
            <td>1/2/2010</td>
            <td><a href="#3" class="delete">delete</a></td>
        </tr>
    </tbody>
</table>