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

• DIV Demo
• Double Row TABLE Demo
• TABLE Multiple Actions Demo

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.

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>