I want to create a search form where a user queues up items, and then they click a search button to see their results. The results are loaded in from a 3rd party API (through XHR), and while they’re loading I want to show a progress wheel. When the loading is done they’ll be shown the results, and they’ll be able to click a “back” button to get back to the search form (changes the view back to the original).
Note that this is all on one page. There is no actual “submit”, just a change in view to show the results. It will be possible to refresh the results view and stay on the results view because I’ll be using hashes to maintain state (like search/!#searchterms).
I’m an intermediate user of jQuery (read the docs and worked with it for about half a year now), but I’ve never done something like this and I was interested in what the best practices are. Some specific things I was wondering:
- Should I be simply using toggle() to switch views? Or does this tend to look ebtter with some kind of animation?
- Are there some behind the scenes “pre-loading” tricks I should be doing to save time in updating the DOM?
- What’s the common name for using hashtags to maintain state like this? And where can I read more on doing that well with jQuery?
- Anything else I should know..
You’re asking for basically a full featured web application. You can piece together what you want with something like
Or you could learn something like Backbone.js or Spine.js or JavascriptMVC for added consistency.
There are many ways of handling caching with HTTP conditional requests and client side caching in memory or local storage. I gave a talk recently on this and its viewable here:
http://loft.bocoup.com/tim-branyen-jquery-templates/
I’m not a particularly great speaker, but the slides and demo source is here:
http://talks.tabdeveloper.com/Advanced_jQuery_Templates/
Of course you could do this really basic… but I’d implore you to think more about what you’re trying to do and pick the right solutions.