Note: The fancybox jQuery plugin can be found here.
Last week we rolled out a new design for yipit, which I’m really excited about. It looks awesome. Sam Brown did an amazing job. In a few different places we decided to use modal forms that would submit via Ajax. I think technique provides great UX, but if the forms require server-side validation, displaying the appropriate HTML can be a bit of a headache.
I wanted to find a solution that met these criteria:
- Familiar server-side code
- Adhere to MVC
Change of Plans
Fancybox makes it really easy to draw an overlay with HTML returned via Ajax. Fancybox also only allows one overlay at a time. This is a limitation, but it does make it really easy to replace one overlay with another. Leveraging both these behaviors, we realized we could have every call to the server result in a new fancybox that would replace one currently being displayed. This way we cold write traditional Django views to handle the Ajax request and take full advantage of the Django templating system, including the display of form errors.
- Every <a> tag that launches a fancybox form must share common class.
- Every fancybox that contains a form must share a common class.
- Every form must have an explicit action containing the destination URL for the Ajax request.
- Every response contains the html for a new fancybox (and must adhere to guidelines 2 and 3 to allow for chaining)