CODEWITHSUNDEEP
jquerycss
Ben G
Ben G

Reputation: 26771

Best way to change view (from form to results) in jQuery

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:

Upvotes: 1

Views: 274

Answers (2)

Majid Fouladpour
Majid Fouladpour

Reputation: 30252

$('a#search').click(function(){
  $('#search_form_overlay').show();
  $('#search_results').load('urls_to_api', { q: query_terms }, function() {
    $('#search_form_overlay').hide();
  });
});

And some answers:

Q: toggle() vs. animation
A: toggle is faster than animation, but which one look better ia a matter of taste.

Q. pre-loading
A. You are not updating the DOM with new resources (images), you are just showing a hidden div, so no pre-loading necessary.

Q. maintaining state
A. If by maintain state you are refering to each visitor's experience, you need to set and read cookies, but if you mean the state should be reproducible from the url, then you'd be using url fragment (#something). Here's a method I suggested for a similar situation; you can adapt it to your needs.

Upvotes: 1

tbranyen
tbranyen

Reputation: 8577

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.

Upvotes: 1

Related Questions