Solved

Dynamic Item Filter

Posted on 2009-06-30
5
488 Views
Last Modified: 2013-12-13
I was checking a website for a camera the other day and I noticed this nice dynamic filter system. Basically all cameras available are shown at first then ticking certain checkboxes causes some to grey out as they do not match the criteria. I had a look at the source code but could not discern much from it. Does anyone have experience of this and can they explain how this works?

I'm guessing that it uses javascript to dynamically query a database. It looks nice and is very easy to use but I think the downside is you can only have a limited number of items as that would place too much strain on the server. Here's the website

http://www.fujifilm.co.uk/consumer/digital/digital-cameras/view-all

any help appreciated!
0
Comment
Question by:allanch08
  • 3
  • 2
5 Comments
 
LVL 5

Assisted Solution

by:kingofnines
kingofnines earned 250 total points
ID: 24744278
You are correct, it is done with javascript and jquery. Im not sure what "strain" you are reffering to. It is only running one query at any given time so there is no sttrain at all. The limit on items per page would be a design and usability issue, not a server load issue.


Alan
0
 

Author Comment

by:allanch08
ID: 24744632
thanks for the reply, I undertand it is just one query at a time but what if there are hundreds or even thousands of users using it at any one time.
0
 
LVL 5

Assisted Solution

by:kingofnines
kingofnines earned 250 total points
ID: 24744717
As far as I know, there are very few sites that are big enough to have to worry about that kind of volume. And those that are, have some pretty serious server setups to handle it. I'm not sure what the question is that you are asking, but as far as server load I don't think you will have to worry about it. You can see on the camera site how fast the reaction time is. You would have to have many, many users hitting the site at the same split second to affect the sites performance. If you are fortunate enough to have hundreds or thousands of users at your site at exactly the same time then you can surely afford to beef up your servers to handle the load.


Alan


Alan
0
 

Accepted Solution

by:
allanch08 earned 0 total points
ID: 24746416
okay, guess I don't have to worry about a server having problems handling this. I take you point that having too many items to start off with can be a problem and affect usability.

I managed to find this tutorial which looks good:

http://jetlogs.org/2009/04/03/filtering-lists-with-multiple-categories-using-jquery/
0
 

Author Comment

by:allanch08
ID: 24749366
having another look at the fuji website I think I have a better understanding of how it works. I'd say the database of products is queried once on page load to get all results. each item has some kind of javascript tag as shown below. the checkboxes then filter out the items accordingly with the help of jquery. so basically all the hard work is done on the client side.
cameras['finepix-s5-pro'] = ['over_150', 'face-detection', 'metal-body', 'real-photo-technology', 'large-lcd-screen'];// 499.99

Open in new window

0

Featured Post

Netscaler Common Configuration How To guides

If you use NetScaler you will want to see these guides. The NetScaler How To Guides show administrators how to get NetScaler up and configured by providing instructions for common scenarios and some not so common ones.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Foreword (July, 2015) Since I first wrote this article, years ago, a great many more people have begun using the internet.  They are coming online from every part of the globe, learning, reading, shopping and spending money at an ever-increasing ra…
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

832 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question