jQuery best way to get JSON with ajax

Question

I am developing an eshop and the client wants ajax. I think that this is a bad idea because its going be slow.

However while viewing the products there are some filters on the left. When a user selects a filter some other should be disabled.

For example there may be jackets for both males and female, but the red colour is only available for females, so when the user clicks male, the red filter should be disabled.

I am wondering which is the best way to achieve this. I would not use ajax for this just load all the products of the category and filter them with Javascript but I can't because I must use ajax.

So should I make a separate call like .getJson('filters.php.....', currentFilters, callback)? and then decide which filters will be disabled? (This requires executing more queries at the database)

Or is it possible to include in the results page something like this:

<script type=text/javascript>
    var data={jsondatagoeshere};
</script> 

I wonder whether all browsers will execute this code. Any other suggestion?

Answer 1

Both will work fine but it all depends on how large the data is.

Another method is to filter the results directly on the page like (hide unmatched items):

Quick example:

html

<ul>
  <li>Item1 <span>tag1, tag2</span></li>
  <li>Item2 <span>tag1, tag3</span></li>
</ul>

css

span { display:none }

jquery

$(".filter").click(function() {
  $("ul > li").hide().filter(function() {
     return $("span", this).text().indexOf("tag1") >= 0;
  }).show();
});

This will filter instantly and without having to recall the database multiple times but as I said it all depends on how large the data is.