Display exposed filters as a menu with links

Hi Frederic, any idea how to get this working with BEF 7.x-1.x-dev and Views 7.x-3.0-beta?

There is an option in the D7 branch, which was recently checked into the D6 branch, that allows you to set exposed sort options as links.

There's no reason that couldn't be extended to work with any other filter as well.

This has been checked in for the D7 branch. To get the bef-select-as-links-selected class to show on selected links you'll need to patch core until #1114398: Form element & Form element label theming is broken is fixed.

Note: this functionality might change as a result of #1137720: POST for exposed filters. Currently I'm using GETs (changing the URL), but that doesn't play nicely with AJAX views.

Backporting to D6 is going to be lower priority for now as my main focus is on getting an initial D7 release and an updated D6 release out.

Sorry I donnot really get the point. Could you give a more precise description?

• This feature is only being implemented in Drupal 7 right now? Do you have a roadmap?
• Is this a hack depending on javascript and css display:none stuff, or a fully working feature?
• Until now there is no possibilty to expose filters as tabs; this function would be great without any hacks, which is the programatically problem for implementing? I never got too deep ito Views coding.

The features is only in D7 right now. It's not using javascript/display:none, it's rewriting the select element at the theme layer as links. Because it's using GETs, it doesn't work well with AJAX in Views.

The D7 roadmap is to get as much existing functionality working and put out a 1.0 release. D6 work right now is mostly bug fixes in hopes of getting a 1.1 release out the door.

Doing exposed filters as tabs is outside the scope of this issue. Please open a feature request for that. I haven't looked into fiddling with the entire exposed form before so I don't know if it's feasible, but it would be cool!

Thanks.

Thanks for information. But is there a big difference beetween tabs and links? If I use the exposed filter variable theming views I could style it like tabs with css.

The alternative is using Views Display Tabs, but i donnot really like this approach. Using BEF saves a lot of efforts.

If I understand you right, the Views Ajax function does not like a theming overwrite, because it expects the standard exposed filter input form.

edit: in fact I get a error 500 message on drupal 7

@funkytraffic: I'm not familiar with Views Display Tabs, so I can't comment on it.

But Views' AJAX functionality is not really affected one way or the other by theming changes. The reason the BEF links option doesn't play well with it is because BEF links is using URLs to send filter selections to Views while Views AJAX is using Javascript.

In short, you can theme the look-and-feel of an exposed filter all you want without affecting AJAX functionality.

Hello all.

I try Federic's approach on #1 (on drupal 6) and I get the terms listed(li) but not as links, just text...
Moreover I would like to remove the classic select list form generated by the view and keep only the listed terms.
Can anyone help? thanks.

Hello Frederic, thanks for the reply.

You are right about the ccs(display:none) I didnt notice it in the 1st post.

For the links what I do is:
1. Put your theming function in template.tpl.php file changing:

• phptemplate to "mythemename"
• views-exposed-form-Contentbrowser-block-1 to my form['id'] as shown in firebug

2. Insert a script in mythemename.info file

• scripts[]= script.js
• in script.js file I put your jquery code changing "views-exposed-form-Contentbrowser-block-1" to my form['id]

What Am I missing?

http://drupal.org/project/views_hacks helped me

I am trying to do the same as Frederick and chefarov but I am getting a WSOD with views 3. Is this only compatible with views 2?
@chefarov, did you succeed with your try?

The approach in #1 worked for me using Views 3, with two little modifications:

instead of using function phptemplate_views_exposed_form(&$form) (which didn´t work for me) I put the code in a hook_form_alter() of my custom module:

function MYMODULE_form_alter(&$form, $form_state, $form_id) {
  switch ($form_id) {  

     case 'views_exposed_form':
      
       if ($form['#id'] == 'views-exposed-form-VIEWS_NAME-DISPLAY_ID') {
          
          $links = $form['tid']['#options'];
          $newlinks = array();
        
          foreach ($links as $tid => $term_name) {
            $newlinks[] = '<span class="customclass" id="' .$tid . '">' . $term_name . '</span>';
          }
        
          $prefix = theme('item_list', $newlinks);
        
          $form['links'] = array(
            '#type' => 'markup',
            '#value' => $prefix,
          );
        
       }
        
  }

I wrapped the jquery code in a Drupal.behaviors function (otherwise, it didn´t work for me):

Drupal.behaviors.MYMODULE = function (context) {

$('.customclass').each(function(index) {
	  $(this).bind('click', function(){
	    var id = $(this).attr('id');
		$('#views-exposed-form-VIEWS_NAME-DISPLAY_ID #edit-tid').val(id);
		$('#views-exposed-form-VIEWS_NAME-DISPLAY_ID').submit();
	  });
});

};

It looks like an useful, quick - and possibly dirty - hack for using a list of links in a exposed filter form while preserving the AJAX capability of the view. I tried another working approach here, without AJAX.

I was looking for such a solution for Drupal 7. I had to modify how the JS was attached, and instead of triggering the form submit had to trigger the change event on the hidden select input. Here's what worked for me:

function MYMODULE_form_alter(&$form, &$form_state, $form_id) {
  switch ($form_id) { 

     case 'views_exposed_form':
     
	$path = drupal_get_path('module', 'MYMODULE');
	drupal_add_js($path.'/js/MYMODULE.js', 'file');
	drupal_add_css($path.'/css/MYMODULE.css', 'file');
     
       if ($form['#id'] == 'views-exposed-form-teach-home-page') {
         
          $links = $form['type_1']['#options'];
          $vars = array();
       
          foreach ($links as $tid => $term_name) {
	      $options = array(
		'attributes' => array(
		  'class' => array( 'MYM-filter-tab' ),
		  'id' => $tid,
		),
		'query' => array(
		  'type_1' => $tid,
		),
	      );
	      $vars['items'][] = l($term_name,  "teach-home/page", $options);
          }
          $vars['type'] = 'ul';
          $vars['attributes']['class'] = 'MYM-tabbed-filter';
       
          $prefix = theme('item_list', $vars);
       
          $form['links'] = array(
	    '#markup' => $prefix,
          );
       
       }
       break;
  }
}

(function ($) {
  Drupal.behaviors.MYMODULE = {
    attach: function(context, settings) {
      $('.MYM-filter-tab').on('click', function(e) {
	e.preventDefault();
	var id = $(e.target).attr('id');
	var filter = $('#views-exposed-form-teach-home-page select[name="type_1"]');
	filter.val(id);
	filter.trigger('change');
      });
    }
  };
})(jQuery);

Better expose filter would do it.
and which doesn't support for liks but radio/check boxes.
To make the link work

Here is a simple patch
https://drupal.org/files/issues/select_as_links_backport_to_6.x-1.x-1159...