I am building a faceted search system that has inputs in a sidebar (the facets are check boxes), and an input in the header of the page (the main query box). All of these inputs are submitted simultaneously when the user submits a search.
The only way I can think of to make this work is to wrap the entire page in an HTML form tag. Something like the following pseudo-html:
<form> <div id='header'> <logo/> <input id='q'/> <!-- a bunch more stuff --> </div> <div id='sidebar'> <div id='sidebar-facets-subsection'> <input id='facet1'/> <input id='facet2'/> <input id='facet3'/> <!-- a bunch more stuff --> </div> <div id='sidebar-form-subsection'> <form id='unrelated-form'> <input id='unrelated-input-1'/> <input id='unrelated-input-2'/> </form> </div> </div> <!-- a bunch more stuff --> </form>
This would work, except for three things:
- I need to use other forms in the page, as I've indicated above.
- I use different django templates to generate the header and the sidebar, making the templates have dependencies on each other.
- It's a real mess since the sidebar is in reality about 100 lines, not three.
Any creative solutions or ideas?
- Put all the checkboxes in the header and wrap them in div
- Set up and empty but clean side bar
- Attach a callback to the
form.submitevent, and when the user submit the form, cancel the event then, take the data from the search field and the checkboxes and send it as an Ajax POST request.
Using a framework like jQuery, it's a 15 minutes job.