Gallery

Modules

Documentation

Context Navigation

YUI Library is not responsible for bugs or support with this module. It is available as a free service. For support please contact the module owner with the provided links.

Dynamic Dialogs (gallery-dynamic-dialog) on cdn

Last Updated: 09/19/12

+ 0 -

J. Shirley

YUI Contributor

See 8 more by this user.

Created: 02/22/12
Last CDN Push: 06/20/12
Build Tag: gallery-2012.06.20-20-07
Project: YUI 3
License: YUI BSD
YUI Version: 3.7.1
Free for use.

Dynamic Dialogs is designed to remove repetitive code that shows dialogs and has other behaviors by wrapping up common dynamic behaviors into a single, delegate-based system.

It supports:
* Opening and retrieving content from hidden elements or remote servers
* Background submission of forms (such as DELETE or POST requests)
* Error Handling from remote servers

Tags:
jshirley

With HTML like:



<p>This link <a href='#simple-form' class='open-dialog' title='Message!' data-id='2'>opens the dialog, replacing the URL</a>.</p>

The dynamic-dialog code will listen to events on `a.open-dialog` anchors and show a dialog. The `#simple-form` tells it to show the content from a separate element:



<div class='yui3-dynamic-dialog-source' data-async='true' id='simple-form'>

    <form method='post' action='/and/uses/data/for/templates/{id}'>

      <fieldset>

        <p>This form is templated. You can use {id} and set the &amp;quot;data-id&amp;quot; attribute in the trigger</p>

        <p>The default style will hide the buttons, though. There is a keypress listener that handles pushing &amp;lt;enter&amp;gt; and attempts to do the right thing.</p>

<label>

            Your name:

            <input name='name' type='text' placeholder='Don&amp;apos;t worry, this form does nothing.' />

        </label>

        <div class='yui3-dynamic-dialog-buttons'>

            <input type='submit' value='Buttons are important' />

            <span>without them, &amp;lt;enter&amp;gt; won't submit a form.</span>

</div>

      </fieldset>

    </form>

</div>

Code Sample

<script src="http://yui.yahooapis.com/3.7.1/build/yui/yui-min.js"></script>

YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2012.06.20-20-07'
}).use('gallery-dynamic-dialog', function(Y) {
    var dialogs = new Y.DynamicDialog();
    // Setup the default event delegates. Without this, you'll have to set up
    // everything yourself.
    dialogs.setupDelegates();
 
    // By default, the dialog will call submit on the form after firing this
    // event. To change that behavior, have your own event and preventDefault.
    dialogs.on('submit', function(e) {
        var dialog = e.dialog,
            form   = e.form,
            action = form.getAttribute('action');
 
        if ( action === '#' ) {
            dialog.hide();
            e.preventDefault();
        }
    });
 
});