Drupal 7 Views (3) add AJAXified RESET button for views exposed filters

Drupal 7 Views (3) add AJAXified RESET button for views exposed filters

Drupal 7 Views (3) provides great functionality. However the optionally provided "Reset" button for exposed filters does not work nice with AJAX.
If it is clicked it:

  • Does not fire via AJAX but loads a whole new page
  • Has a problem with the URL (see https://www.drupal.org/node/1109980) and so redirects the user to the front page in most cases.

That's not nice and we need a solution that works. Furthermore we don't want the better_exposed_filters.module, but a lightweight solution.

So we developed a simple replacement, which detects if the reset function is activated in the views settings ("Exposed Form" > "Exposed Form Style" > "Settings) and replace it with a jquery.forms.js: formReset()-function and a simple trigger for the AJAX functionality.

So here's the code:

  1. /**
  2.  * Implements hook_form_alter().
  3.  */
  4. function MYMODULE_form_views_exposed_form_alter(&$form, &$form_state) {
  5.   // ------------------------------------------------------------
  6.   // Add an own reset button to all views exposed forms. The reason behind is,
  7.   // that the default Drupal reset button doesn't play nice with AJAX
  8.   // and jumps back to the front page because of URL problems. So it's unusable for us.
  9.   //
  10.   // Add class to make it better selectable in JS and CSS
  11.   $form['submit']['#attributes'] = array('class' => array('my-views-filter-submit'));
  12.   $submit_btn_id = $form['submit']['#id'];
  13.   if (!empty($submit_btn_id) && !empty($form['reset'])) {
  14.     // Add own reset button
  15.     $form['submit']['#suffix'] = '<button onclick="javascript:jQuery(this.form).clearForm();jQuery(this.form).find(\'#' . $submit_btn_id . '\').trigger(\'click\');return false;" class="form-submit ico-remove form-reset my-views-filter-reset">' . t('Reset') . '</button>';
  16.     // Remove the original RESET button.
  17.     unset($form['reset']);
  18.   }
  19. }

I hope it works well for you and please leave a comment, if you liked it :)

Comments

Reset-Button for multiple forms

Hi Julian,

searching for a solution for my problem I came along your post and maybe you can advise me. I use the module MEFIBS (more exposed filters in blocks) to split the exposed form in different blocks. When I check the "reset button" in the settings, I get a reset button for each block. What I am attempting to do is placing one reset button onto the page which resets all the forms.

Is this possible?

ah...and I am using Better

ah...and I am using Better Exposed Filters.

Line 11 should be changed to

Line 11 should be changed to this, otherwise an unwanted Apply button will appear:

$form['submit']['#attributes']['class'][] = 'my-views-filter-submit';

My form has no

My form has no $form['reset'].
I am using Drupal 7.39 and Views 7.x-3.11

It worked. Thanks!!

It worked. Thanks!!

Alternative, shorter solution

Hi!

I did it like follows in order to maintain markup already defined by Drupal, Views and theme (I use the Bootstrap Theme):


/**
* Implements hook_form_alter().
*/

function MYMODULE_form_views_exposed_form_alter(&$form, &$form_state) {

// Get the submission button ID
$submit_btn_id = $form['submit']['#id'];

$form['reset']['#attributes'] = array('onclick' => "javascript:jQuery(this.form).clearForm();jQuery(this.form).find('#$submit_btn_id').trigger('click');return false;");

}

BR / Fredrik

Hi, very usefull, thanks

Hi, very usefull, thanks should be submitted to the views module.
Simone

Awesome!

Thank you, Fredrik Ekelund! That solution works flawlessly in Bootstrap.

Overwriting existing functionalities

There's several issues with this solution, although it is a very smart approach using formReset and then submitting the form.

Fredrik's solution (setting the onclick through #attributes) is much cleaner and works perfectly!

example problems with the original:

Line 11 will overwrite all existing css classes on the submit button. For me this broke the auto-submit completely.

Creating a new reset button removes all other configuration as well. This includes the "Reset text" settings, css classes,... etc.

Really Helpful

Thanks,

The solutions worked for me.

I was middle of the things but was not able to resolve the issue but the solutions you provided worked for me.

Thanks again!

Post new comment

The content of this field is kept private and will not be shown publicly.

More information about formatting options