Building a Modal Filtering List with YUI

In this tutorial we will build a simple form and embed it in a modal panel.

Building the form
There are two approaches we could take towards building the form : dynamic or static. A dynamically loaded interface is built by the javascript executed on page load, a static interface lurks hidden inside the html source and is displayed when needed. For the sake of simplicity, we will be using a static interface in this tutorial.

Our form is quite simple. It consists of 3 tiers of options and a submit button:

<div id="filterpanelform" style="display:none">
<fieldset><legend>Type</legend>
<input name="type" value="berry" type="checkbox">Berry
<input name="type" value="citrus" type="checkbox">Citrus
<input name="type"value="drupe" type="checkbox">Drupe
<input name="type" value="Melon" type="checkbox">Melon
</fieldset>

<fieldset><legend> Size </legend>
<input name="size" value="small" type="checkbox">Small
<input name="size" value="medium" type="checkbox">Medium
<input name="size" value="large" type="checkbox">Large
</fieldset>

<fieldset><legend> Color </legend>
<input name="color" value="red" type="checkbox">Red
<input name="color" value="orange" type="checkbox">Orange
<input name="color" value="yellow" type="checkbox">Yellow
<input name="color" value="green" type="checkbox">Green
<input name="color" value="purple" type="checkbox">Purple
<input name="color" value="pink" type="checkbox">Pink
</fieldset>

<button value="Filter" name="doFilter" type="button"id="doFilter">Filter</button>
</div>

Notice the style=”display:none;” on the containing div? This is to hide the contents from view until our user calls the modal dialog.

Building the Modal Interface

Now we need to build a YUI panel to contain the filtering interface. Unlike the form elements, the panel we will build dynamically. The panel will be created on page load, but will remain hidden until called for.

// Instantiate a Panel from script
YAHOO.example.container.FormPanel = new YAHOO.widget.Panel("formPanel", { width:"320px", visible:false, draggable:true, close:true} );
YAHOO.example.container.FormPanel.setHeader("Form Panel");

//populate the panel with the form we've hidden in the HTML
YAHOO.example.container.FormPanel.setBody( document.getElementById("filterpanelform").innerHTML );

YAHOO.example.container.FormPanel.render("container");

• Building a Dynamic Form with YUI
• Getting and setting values for jQuery widgets
• Great Tutorial on OO programing in Prototype 1.60
• YUI Menu: A widget for the masses.
• YUI Color Picker
• Javascript Menus: The Good, The Bad & The Superfluous
• Excellent Resource for Learning MooTools
• Handling Multiple File Uploads with ExtJS File Uploader & PHP
• Build a YUI Panel from Content
• 5 Open Source Rich Text Editors