When Ajax is enabled to a Views block display with exposed form filter, submitting the filter causes the page the reload. This happens when using themes that use buttons as opposed to input types of submit or image (e.g. Bootstrap). The problem doesn't exist in any of the base themes, but since ajax_view.js only attaches the ajax functionality on those two input types, it fails on other cases (e.g. Bootstrap-related themes).

One part of the fix is to apply the correct dom_id class on views-view.html.twig, but the other part relies on actually recognizing button[type=submit] as one of the elements where the ajax exposed filter should work.

This issue is related to https://www.drupal.org/project/bootstrap/issues/2651008, but I can't find any core patches to ajax_view.js so far.

CommentFileSizeAuthor
#19 views-ajax-views-exposed-filters-button-2998908-19-9-2-x.patch1.42 KBilya.no
#19 views-ajax-views-exposed-filters-button-2998908-19-9-0-9.patch1.42 KBilya.no
#16 exposed_ajax_view-using-button--2998908-16.patch1.36 KBslayne40
#15 exposed_ajax_view-using-button--2998908-15.patch1.58 KBdom.
#2 views-ajax-views-exposed-filter-button-2998908-1-D8.patch890 bytesrandell

Comments

randell created an issue. See original summary.

randell’s picture

randell commented
StatusFileSize
new views-ajax-views-exposed-filter-button-2998908-1-D8.patch890 bytes
randell’s picture

randell commented
Status: Active » Needs review
prashantgajare’s picture

prashantgajare commented

@randell - Can you specify which bootstrap theme you are using ? I am not able to replicate this issue.

Thanks!

randell’s picture

randell commented

Hey @prashantgajare, in the issue I linked, it already works on the Bootstrap theme, which uses Bootstrap 3. The fix was more like a work-around to get it to work on the theme. But when using the Bootstrap Barrio theme, with Bootstrap 4, the issue persists, obviously because the fix was only applied to the Bootstrap theme. I can only guess that the issue also exists in other custom themes using Bootstrap. I think it's quite impractical to apply the same fix across multiple themes, when it can be fixed in core.

If you look at the patch, you'll get what I mean.

borisson_’s picture

borisson_
Primary language Dutch
Location Mechelen, 🇧🇪
commented

I'm not sure about this, this could be a BC break? It's also sad that we have to make changes to our code because bootstrap changes out the element

randell’s picture

randell commented

I think the net effect is we're making views exposed form more flexible when it comes to form submissions. It has become a wide practice to use button elements over input submit and images, because buttons can contain other HTML elements as the labels. Plus, buttons can accept a wide range of uncommon but useful attributes. See MDN web docs.

s3b0un3t’s picture

s3b0un3t
Primary language French
Location Nantes
commented

Hello,
I confirm the problem under the latest version of Drupal (v8.6.13).
The ajax submission of the exposed views form doesn't work if we replace the input[type="submit"] with button[type = "submit"].

The patch delivered by @randell resolves the problem.

Reproduced with the contributed theme Bootstrap Barrio.

s3b0un3t’s picture

s3b0un3t
Primary language French
Location Nantes
commented
Version: 8.5.7 » 8.6.13

Update issue version to 8.6.13.

jmickela’s picture

jmickela
he/him
Location SF Bay Area, California
commented

I tested the patch, and while it does correctly submit the form via AJAX, it seems that Views is not honoring the form value. I'm setting up a Search API page, and whether I have AJAX enabled or not, if I turn the submit button into a button of type submit, the full text search exposed filter has no effect.

Breaking AJAX seems to be part of a larger problem.

osab’s picture

osab commented

Thank you @randell, this is a very useful patch #2 if we're using selector in the template.

lendude’s picture

lendude
Primary language Dutch
Location Amsterdam
commented
Issue tags: -views, -Ajax +Needs tests

I think this is BC safe, we are only adding elements to check for.

It does need an automated test though.

Version: 8.6.13 » 8.6.x-dev

Core issues are now filed against the dev versions where changes will be made. Document the specific release you are using in your issue comment. More information about choosing a version.

Version: 8.6.x-dev » 8.9.x-dev

Drupal 8.8.7 was released on June 3, 2020 and is the final full bugfix release for the Drupal 8.8.x series. Branches prior to 8.8.x are not supported, and Drupal 8.8.x will not receive any further development aside from security fixes. Sites should prepare to update to Drupal 8.9.0 or Drupal 9.0.0 for ongoing support.

Bug reports should be targeted against the 8.9.x-dev branch from now on, and new development or disruptive changes should be targeted against the 9.1.x-dev branch. For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

dom.’s picture

dom. commented
Version: 8.9.x-dev » 9.1.x-dev
StatusFileSize
new exposed_ajax_view-using-button--2998908-15.patch1.58 KB

I found out the patch at #2 is good but does not work on latest drupal, therefore I move the issue to 9.1.x

I reupload the patch without an interdiff since it is exactly the same as #2 but applying to 9.1.x branch and also includes the changes in both the ajax_view.es6.js and ajax_view.js files.
It still does not includes tests thought.

slayne40’s picture

slayne40 commented
StatusFileSize
new exposed_ajax_view-using-button--2998908-16.patch1.36 KB

For latest Drupal 8.9.x

Version: 9.1.x-dev » 9.2.x-dev

Drupal 9.1.0-alpha1 will be released the week of October 19, 2020, which means new developments and disruptive changes should now be targeted for the 9.2.x-dev branch. For more information see the Drupal 9 minor version schedule and the Allowed changes during the Drupal 9 release cycle.

tim-diels’s picture

tim-diels
He/Him
Primary language Dutch
Location Belgium 🇧🇪
commented

Having the same issue and not using the bootstrap theme. The latest patch works as expected. Thanks for this!

ilya.no’s picture

ilya.no commented
StatusFileSize
new views-ajax-views-exposed-filters-button-2998908-19-9-0-9.patch1.42 KB
new views-ajax-views-exposed-filters-button-2998908-19-9-2-x.patch1.42 KB

Attaching patches for D9 versions in case anyone needs them.

mglaman’s picture

mglaman
Primary language English
Location WI, USA
commented

This also breaks Media Library when using Layout Builder and it loads the frontend theme.

Version: 9.2.x-dev » 9.3.x-dev

Drupal 9.2.0-alpha1 will be released the week of May 3, 2021, which means new developments and disruptive changes should now be targeted for the 9.3.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

pbouchereau’s picture

pbouchereau commented

This is a duplicate of #1551534: Allow a button in an exposed forms to trigger ajax.

mglaman’s picture

mglaman
Primary language English
Location WI, USA
commented
Related issues: +#1551534: Submit buttons themed as <button> element fail to trigger ajax in Views exposed forms

Per #22, linking.

effulgentsia’s picture

effulgentsia commented
Status: Needs review » Closed (duplicate)

Closing as a duplicate of #1551534: Submit buttons themed as <button> element fail to trigger ajax in Views exposed forms per #22. I'll add issue credit to that issue for folks who worked on this one.

I'm setting up a Search API page, and whether I have AJAX enabled or not, if I turn the submit button into a button of type submit, the full text search exposed filter has no effect. Breaking AJAX seems to be part of a larger problem.

For the larger problem, see #1671190: Use <button /> form element type instead of <input type="submit" />.