gfraser
22 Dec 2006, 2:01 PM
Scenario: I'm making an address editor dialog for an online shopping basket. It has an east panel with previous addresses and a center panel with an address editor. Well, kinda...
I've got the east panel working perfectly - all my previous addresses show up and when I click one an event listener grabs the address and sends it in to a method that fills out the form in the center panel.
Or rather it would do if there was a form in that panel ;)
My current direction is to put the raw form html in to a dom template and have loads of named vars in that template. Pass in the address object and have the template rendered in to the center panel.
But, this all seems somewhat messy and clumsy. So, I took a look at the awesome grid stuff, but I don't really want anything that looks like a grid - I want a very clean, non-techie looking form in the center panel and grids just look too "desktop" for my needs. Furthermore, I'm having all sorts of trouble with actually getting the grid stuff to work...
Another issue is that I want an optional section of the form. Most of the address details are required and will always be displayed. However, if someone is buying something on behalf of their company, I want them to tick a "I'm buying on behalf of a company or organisation" checkbox and have another chunk of form "slide" (or just appear, animation isn't essential) mid way through the form below the checkbox.
So, I guess what I'm asking is "are there any patterns for building and manipulating" forms? I can't find anything in YUI or yui-ext that seems to target form building but it seems like a really obvious requirement.
As an Ajax UI I want the fields in the form to have all sorts of event handlers so I can do validation on data entry and such like. The grid stuff, if I could get it working, would be almost ideal but I'm not sure how I'd get the checkbox to display the company bit (ie. rows for tax id, company reg number, etc).
Anyway, looking forward to your comments and ideas.... :)
I've got the east panel working perfectly - all my previous addresses show up and when I click one an event listener grabs the address and sends it in to a method that fills out the form in the center panel.
Or rather it would do if there was a form in that panel ;)
My current direction is to put the raw form html in to a dom template and have loads of named vars in that template. Pass in the address object and have the template rendered in to the center panel.
But, this all seems somewhat messy and clumsy. So, I took a look at the awesome grid stuff, but I don't really want anything that looks like a grid - I want a very clean, non-techie looking form in the center panel and grids just look too "desktop" for my needs. Furthermore, I'm having all sorts of trouble with actually getting the grid stuff to work...
Another issue is that I want an optional section of the form. Most of the address details are required and will always be displayed. However, if someone is buying something on behalf of their company, I want them to tick a "I'm buying on behalf of a company or organisation" checkbox and have another chunk of form "slide" (or just appear, animation isn't essential) mid way through the form below the checkbox.
So, I guess what I'm asking is "are there any patterns for building and manipulating" forms? I can't find anything in YUI or yui-ext that seems to target form building but it seems like a really obvious requirement.
As an Ajax UI I want the fields in the form to have all sorts of event handlers so I can do validation on data entry and such like. The grid stuff, if I could get it working, would be almost ideal but I'm not sure how I'd get the checkbox to display the company bit (ie. rows for tax id, company reg number, etc).
Anyway, looking forward to your comments and ideas.... :)