[SOLVED] Dynamic Filtering on News Module

[Uncle Pete]

Sorry if this has been done to death, but I'm struggling to find quite what I need.

I've got a page showing a bunch of news items from a single parent category, but the items themselves are from several daughter categories.

What I'd like is to have a means of filtering that list dynamically. I have about eight filter sets that need to draw from two or three categories. So let's say I click on a label, radio button, pull down, whatever, and select something - let's arbitrarily say 'fish' - then the list gets filtered to just categories 1, 3 and 7 which I've predefined.

I know I can use the module on different pages to easily call those categories, but I'm struggling to work out how I can do it within the same page dynamically. I'm sensing that it's achievable without too much stress, but I just can't get there.

Could anyone throw me a suggestion or steer that I can go and read about? Any help much appreciated. I hope the statement of the problem is clear.

[Wishbone]

Create the radio buttons, pulldown, (name='category' or whatever) etc. and either have it auto-submit or use a submit button (POSTing to the same page). If you're pre-defining the categories, you can make the values list the categories, comma-separated. In your template logic, have something like:

Code: Select all

{if $smarty.post.category}
  {news}
{else}
  {news category=$smarty.post.category}
{/if}

The first time the page is loaded, it shows all.. If something is POSTed to the page, it filters by that category. You can even pre-load the pulldown, radio button, checkboxes, etc with the POSTed value(s) so that they can see what category they are viewing after the page reloads.

It can also be done with jquery if you don't want the page load.. Assign a class that matches the category name, possibly prefixed if you're worried that it will clash with an existing class. Then when a category is selected, have some jquery code only show those that match the class and hide all others.

[Uncle Pete]

That looks rather beautiful. I'll thrash through it tomorrow and see if I can make any magic happen.

Thanks so much for the quick and informative response!

[Wishbone]

For security, since it's taking input from the user, you might want to write a UDT to sanitize the incoming category list... Just check for only a-z and comma and reject anything else.

[Uncle Pete]

That's worked a treat, and now I'm filtering fabulously. Thanks so much for the help!

[Mich-adg]

Hi Uncle Pete!
i'm looking for the same tip! Is there a way to post your templates in order to see how to make the form and interact with smarty?

Thx!

[Mich-adg]

I tested the solution here wich work fine:
http://calguy1000.com/Blogs/17/60/news- ... pdown.html

but it reload the page, and i want to display the articles quickly without reloading...

[Uncle Pete]

Well, I'm not holding this code up as a model of good practice, but it does at least seem to work!

In the page where I display my news articles (in this case it's a bunch of parent notices on a school website), I've got this:

Code: Select all

<form method="post">
<select style="width: 100px;" name="category" onchange="this.form.submit()"> 
<option value="">Filter Notices</option> 
<option value="parent_notices | year_7,parent_notices | ks3,parent_notices | all_years">Year 7</option> 
<option value="parent_notices | year_8,parent_notices  | ks3,parent_notices | all_years">Year 8</option>
<option value="parent_notices | year_9,parent_notices | ks3,parent_notices | all_years">Year 9</option>
<option value="parent_notices | year_10,parent_notices | ks4,parent_notices | all_years">Year 10</option>
<option value="parent_notices | year_11,parent_notices | ks4,parent_notices | all_years">Year 11</option>
<option value="parent_notices | year_12,parent_notices | sixth_form,parent_notices | all_years">Year 12</option><option value="parent_notices | year_13,parent_notices | sixth_form,parent_notices | all_years">Year 13</option><option value="parent_notices*">All</option> </select><noscript>&amp;amp;amp;amp;amp;lt;input type="submit" value="Submit"&amp;amp;amp;amp;amp;gt;</noscript></form>

<p>{if $smarty.post.category}{news category=$smarty.post.category summarytemplate='parent_notices' detailtemplate='parent_detail'} {else} {news category='parent_notices*' summarytemplate='parent_notices' detailtemplate='parent_detail'} {/if}</p>

The first bit creates the form that generates the little pull down. If the user then chooses "Year 7" then I need them to see the notices categorised for Year 7, KS3, and all year groups, so that's what's in there. It means lots of categories, but that's not a problem.

Then the second bit calls the news module using the variable.

Hope this helps.