1

I need to have a drill down form where the user first selects a "theme" from a drop down box, and corresponding "background images" will appear with radio buttons that is hidden. For instance, if I select mountain as my theme, then only Rocky Mountain and Fuji will show on the form.

The form looks like this:

<form ...>
<select name="theme" onChange="showBackgroundDiv(this);">
    <option value="0">Mountains</option>
    <option value="1">Jungles</option>
</select>
<div id="0">
    <input type="radio" name="background" value="rocky-mountain.png" alt="mountain rocky"><img src="rocky-mountain.png" /><br />
    <input type="radio" name="background" value="fuji.png" alt="mountain fuji"><img src="fuji.png" /> 
</div>
<div id="1">
    <input type="radio" name="background" value="amazon-rainforest.png" alt="forest amazon">Amazon Rainforest <br />
</div>
</form>

There is actually two problems to this:

1) How do I get django form field to group related items into groups (as div's) in the background image radio input field? I tried doing this manually which was very ugly.

2) Implementation of the hiding/showing of background images.

I'm using django and the only solutions for this I can think of are:

a) Use a JavaScript library such as jQuery. When the user selects a theme, an ajax request is sent to retrieve the values of the radio buttons. Pro: Commonly used pattern. Cons: A second request is sent, even though the list is relatively short. Requires more work on my end.

b) Again using JS library, re-construct the "theme" from the radio input field using the value, alt and name. Pro: No second request is done. Cons: Seems hacky with a lot of JS.

c) Use/Modify a pre-built django app, like django-smart-select. Pro: Separately maintained by someone else. Source available. Cons: Customizing app might require more work than just doing it myself and I might not even be able to figure out how to customize it. Also requires a database, whereby now I store the options in a tuple for use with the Field Widget.

So any suggestions on how to best implement this for re-usability and separation of content and presentation?

noobzie
  • 1,049
  • 3
  • 12
  • 16
  • Upvoted because this is a problem I've run into before, despite the long/vague question :) – Matt Luongo Jan 30 '12 at 17:17
  • 1
    my 2 cents: django-smart-select is pretty easy, but I ended up using custom ajax & jQuery to fill other needs that I had with the data anyway. But, using the (b) method (js to strip list) is better for supporting graceful degradation. – j_syk Jan 30 '12 at 17:30

0 Answers0