Reputation: 1007
It's not often that I find myself completely baffled as to how to go about solving a problem, but for this one, I honestly haven't a clue.
I'm building a site that has many projects, and on the homepage, I'd like people to be able to browse these projects by turning on and off filters. One of the filter types, for example, is GENRE. The user sees a list of genres which, when clicked, filter out all projects that match that genre. Furthermore, if you click on two different genres, you'll see only the projects that match BOTH of those genres.
The problem is, this all needs to be done via AJAX, and that's when things start to get confusing for me. How can I make an ajax call that not only sets up a new filter, but remembers the filters that are currently in place? When the page is loaded, I could do something like
<a href="/api/projects?genre=first_genre">First Genre</a>
<a href="/api/projects?genre=second_genre">Second Genre</a>
But the problem is that when I click two at a time, I end up only filtering by a single genre. I could, perhaps, update all the links to contain an array of already-selected genres using JS each time one is clicked, but this seems incredibly sloppy. Each and every link would then have something like:
<a href="/api/projects/?genres[]=first_second&genres[]=second_genre etc etc...">First Genre</a>
Another thought I had was to maybe store all current filters in a cookie and then when a link is clicked, add that new filter to the list of filters in the cookie, but again, this seems sloppy.
Point is, I have no idea what the proper way to do this is, and I'm feeling a bit lost. To anyone out there who's had success doing something like this before, help!!
Upvotes: 2
Views: 365
Reputation: 15981
Ajax filters always create two issues from user point of view. one is user can't bookmark filter urls and can't use back button.
For example, user click on filter 1, then click filter 2. if user click on back button or reload page, user will lose all filter data.
You can use this method Jquery BBQ http://benalman.com/projects/jquery-bbq-plugin/
on click of genre filter, you can append filter values into hash of url by using above plugin and whenever user reload page or use back button, you have all selected genres into hash.
Upvotes: 1