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/.
This module is pending deployment to the Gallery CDN. It is expected to be pushed soon.
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:
|mysql1||Primary MySQL||Dell||PowerEdge||R710||Edit Delete|
|mysql2||Primary MySQL||Dell||PowerEdge||R710||Edit Delete|
|mysql3||Primary MySQL||Dell||PowerEdge||R710||Edit Delete|
|app1||App Server||Dell||PowerEdge||2650||Edit Delete|
|app2||Primary MySQL||Dell||PowerEdge||2650||Edit Delete|
|bigdisk||NAS||Oracle||Sun Storage||7110||Edit Delete|
Usage strives to be very simple. Here is the gist of the actual code powering this page with additional comments: