The purpose of this module is to simplify the work in creating intelligent, useful dialogs that assist in user interactions. It is largely driven by markup and event delegation.

It is available on GitHub at https://github.com/iinteractive/yui3-gallery/tree/gallery-dynamic-dialog/.

Status

This module is pending deployment to the Gallery CDN. It is expected to be pushed soon.

Overview

The Dynamic Dialogs module handles common cases where you would want to have a dialog for certain actions.

• Simple Button handling. If the dialog has a form, the buttons are outside the form. Clicking the ‘Submit’ button will submit the form correctly.
• Dialogs with Remote Content
• Delete Confirmations

If the form has a ‘data-async’ attribute, rather than calling form.submit() it uses Y.io and submits the form asynchronously.

Dialogs are opened by links, typically. For example, here is a link opens a dialog because the href is ‘#simple-form’. The ‘#simple-form’ is a template (a hidden div with the id “simple-form”). If the template contains a form, the form is then inspected and certain actions are performed on it. I strive to make this module do what you mean in all cases. If I fail at this, please let me know. I am @jshirley on twitter. I’m not hard to find.

If you need to pass in data to the form, like the URL, that is on the link.

This link opens the dialog, replacing the URL.

Very useful for sending something like a DELETE.

For loading a dialog with remote content, you use a different class. remote-dialog. This will allow a link like <a href=“/path/to/remove/content” class=“remote-dialog”>Remote Content</a>. Here is a real example. The title attribute on the link will set the panel’s title.

In the context of a table, with additional records, it becomes very useful. Each row alternates faked success or failures:

Usage strives to be very simple. Here is the gist of the actual code powering this page with additional comments: