Filtering out page content with AJAX in Sitecore

Question

I have a page in Sitecore that displays the list of clients. There's a form with two select boxes that should filter out clients not matching specified criterias. Clients list should be refreshed via AJAX everytime user changes one of the values in the form or after clicking Submit button if JS is disabled.

What is the suggested approach I should take to have this working in Sitecore? I'm not sure about Sitecore part, I know how to call AJAX methods/

Answer 1

From your question, I assume the page will initially display a full list of clients to be filtered down. If so, do you need to fetch any more data from the server? It seems that's duplicating effort. Here's what I'd do:

Create a div for each client, with classes representing the filtering categories:

<div class="client design development">Microsoft</div>
<div class="client design">Apple</div>

Then, when each filter is changed, show/hide the divs based on class selectors. Depending on the target browser and/or js library, you may be able to use CSS attribute selectors.

Answer 2

If you're using Sitecore + ASP.NET Webforms, your quickest/easiest solution is simply to use a .NET UpdatePanel. It's not the most flexible AJAX solution but it certainly gets the job done, with minimal effort. See the following:

http://www.asp.net/ajax/documentation/live/overview/UpdatePanelOverview.aspx

If you are using XSL Renderings in Sitecore, the solution would be more complicated. You'd likely need to create a new Rendering what just lists the clients, then use JQuery to retrieve and replace that section of the DOM.

Answer 3

I found a solution that feels a bit better then what other have proposed here. I've created a new Device in Sitecore, created a new layout in it in which I just added one placeholder. Then I can access all site content using this method. And assigning a URL parameter a=1 makes all URLs with this param automatically redirect to this device. I don't think it can be made much simpler.