Views Taxonomy Links as Exposed Filter with Ajax enabled for Drupal 7

Views Taxonomy Links as Exposed Filter with Ajax enabled for Drupal 7

Drupal 7 and Ajax
FFW Marketing
Thought byFFW Marketing
Website Administrator
December 04, 2013

It is a very common usecase to display a list of nodes on a page, and one or more blocks that give you the ability to filter by tags or categories. You might encounter such a use case on a "blog posts" or "event list" page. And it would be nice if the filtering wouldn't require a full page reload, but rather just inquire the server for new information, and update the list of content via AJAX.

Drupal 7 Categories

Fortunately creating a list of posts is easy with the Views Module, and you can also make an exposed form block which will contain the exposed filters for tags and categories.

A problem arises when just the Views module is used: it only has support for displaying taxonomy terms (we use them for tags and categories) as a select list. A module that helps us solve this is Better Exposed Filters. It has support for displaying taxonomy terms as a select list, checkoxes/radio buttons, link list, and hidden values.

First a content type "Blog" should be created with two taxonomy fields for tags and categories, and any other relevant fields. The fields can be either term or entity references.

Drupal 7 Blog Fields

The next step is creating a view that displays blog items. After configuring all the relevant blog settings, the two taxonomy fields should be added as filters.

Drupal 7 Filter List

And afterwards, they should be set as exposed.

Drupal 7 Filter Settings

Once that is done, assuming the Better Exposed Filters module is installed, the exposed form type should be changed to BEF, and the form can also be exposed as a block.

Drupal 7 Bef

The last step is changing the BEF settings for the taxonomy fields to be displayed as links.

Drupal 7 Bef Settings

Once the view is saved and previewed, the list of blog items should be displayed, the exposed form should appear with two sets of links for tags and categories, which once clicked will filter the results to display only posts with the respective tags or categories.

Unfortunately, even if "Use Ajax" was ticked, the filtering will not work via Ajax. This is a known open issue of Better Exposed Filters athttps://drupal.org/node/1268150, that still isn't fixed, with the most relevant patch being in comment #81 against the DEV version of BEF.

Because using the DEV version was not an acceptable solution for the project I was working on, I've rewritten a patch based on #81 against the stable version of the BEF module 7.x-3.0-beta3, which also included some javascript fixes.

The patch can be found at https://drupal.org/files/issues/filter_links_ajax.patch, and also in the issue queue at https://drupal.org/node/1268150#comment-8210373.

Once the patch is applied, clicking on the taxonomy links should filter the view via AJAX properly.

Topics:
drupal 7

Read next:

Blog
Orange Google Analytics logo with arrow pointing to blue Google Tag Manager logo.

A why-to and how-to guide from FFW on getting the most out of the measurement tools that integrate with your website.

Blog
FFW Blog - illustration

Creating Custom Search Pages with Search404 and Apache Solr Search

Blog
Header

How to Add the Current Date to a View in Drupal 7

Blog
dummy image

How to Configure CyberSource Secure Acceptance Web/Mobile in Drupal 7