Submit buttons themed as <button> element fail to trigger ajax in Views exposed forms

What is the difference between button in input, or why do you need this feature?

I've tested this patch and use it also for the same reason as poster #3

I also tested it, because I ran into the issue described. Fixes issue for me as well.

+1 for this, especially with the HTML5 that is coming a support is very important.

+1, and I also confirm that the patch fixes the issue I ran into as well. This seems to have multiple testers with positive experiences and no discernable drawbacks, so marking as RTBC.

+1, confirm that the patch works for me. Thanks !

+1 also. Tested and confirmed this works perfectly. I ran into this issue when using the Twitter Bootstrap theme (which is HTML5-based), though it likely affects most/all of the various HTML5-based themes.

+1 same issue on bootstrap theme, works for me

allow-buttons-to-trigger-ajax.patch queued for re-testing.

Great. Thanks for providing and testing the patch.

Committed to 7.x-3.x and marked as to be ported to 8.x

WELL,HELPsFUL

The attached patch has been tested against a view created in 8.x-dev.

reroll

Does this patch need tests? It makes complete sense to me and still applies against HEAD. RTBC?

.

Just to update this real quick, as it's still an issue. In a hurry, so no patch here, just the code.

as of Drupal 8.0.4

In core/modules/views/js/ajax_view.js - change

line 117
$('input[type=submit], input[type=image]', this.$exposed_form).each(function (index) {
to
$('input[type=submit], button[type=submit], input[type=image]', this.$exposed_form).each(function (index) {

re-roll

This patch no longer seems to be able to be applied to latest Drupal 8.1.8.

Re-roll so patch will work on Drupal 8.1.8

Applied #24 to Drupal 8.2.1 and it works as promised.

I think the steps forward would be to add some test coverage.

Closed duplicate: #2897276: Allow the attachment of AJAX exposed form behavior to a button of type submit

Re-roll

IMO, we should make it new .class rather than tag[attr] if it's a feature request. and mark existing way @deprecated.

Are there any plans to bring back reset button and make it work with AJAX?

Reroll for 8.5 and 8.6, applies to both.

the patch is quite simple and probably have no drawback. Any plan to commit it soon ?

Works great, can see no way for this to cause issue/conflict

+1 looks good to me, this would help with certain things.

In order to commit a bug fix we need an automated to test to prove that we've fixed the bug and ensure that we don't break it again in the future. For more information about writing tests in Drupal 8 see the following links:

1. https://www.drupal.org/docs/8/testing
2. https://api.drupal.org/api/drupal/core%21core.api.php/group/testing/8.5.x

Patch didn't apply for me on 8.6-rc2. rerolling.

#41 worked for me on 8.6 after #36 stopped working. Thanks to you both.

Redid the patch. Now on the 8.6.x branch.

Tested #44 and works.

See #40 we still need automated test coverage. Also as a new feature we need to target the next minor release branch.

Here is a test for this, test_only file is also the interdiff.

+++ b/core/modules/views/tests/themes/views_test_theme/views_test_theme.theme
@@ -0,0 +1,34 @@
+  $attributes = array('id', 'value', 'type');

This should be short array syntax. Test looks good!

Fixed #51

The feedback in #40 has been addressed.

Unrelated fail

bot flux

Media lib fail

+1 RTBC

Is there a specific reason why we wouldn't allow <button type="button"> to trigger ajax?

Moving to needs review for #62.

#62 Drupal has historically only used input elements, so many components do not support <button type="button"> simply because the markup was not available. There is no technical reason why a <button> should not be able to trigger ajax.

known random fail, #3099427: [random test failure] FieldLayoutTest::testEntityView()

+++ b/core/modules/views/js/ajax_view.es6.js
@@ -139,7 +139,7 @@
+    $('input[type=submit], button[type=submit], input[type=image]', this.$exposed_form)

I would prefer allowing button[type=button] to trigger ajax too since it seems like there isn't any particular reason to not do that.

#67 Not sure, a button[type="button"] should not trigger a form submit:

type
The default behavior of the button. Possible values are:

• submit: The button submits the form data to the server. This is the default if the attribute is not specified for buttons associated with a
  , or if the attribute is an empty or invalid value.
• reset: The button resets all the controls to their initial values, like . (This behavior tends to annoy users.)
• button: The button has no default behavior, and does nothing when pressed by default. It can have client-side scripts listen to the element's events, which are triggered when the events occur.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button

#52 did not apply to 8.9. Should I try #70?

I don't think 70 would apply to 8.9. I've made a quick convenience patch though for 8.9 even though I don't expect this will be back ported to 8 at this point.

70 failed because it dropped the .theme file so the test failed. Here's basically the same thing but it should pass.

This interdiff is against 70 to show what I fixed but this is the same patch as 52 rerolled onto 9.1.x. There would be no interdiff to 52 because there was just some whitespace conflicts from a es6 transpiler changes and some other patch offset conflicts.

Reroll is not a review, I haven't actually looked at this in a long time just passing through and helping out.

Lets see if this gets it back to green on 9.1.x

The patch in #75 contains an unrelated file `./core/.phpunit.result.cache`

Re-roll patch created for 9.2.x, Also removed unreated file './core/.phpunit.result.cache' from the patch, Please have a look and advise.

core/modules/views/js/ajax_view.es6.js does not pass eslint validation

Fixed cs issues.

Works as intended and has test coverage, lets get this in!

+1 also tested this and it indeed does what it needs to do :)

for version 9.1.9, 1551534-75.patch not working

For version 9.1.9, 1551534-75.patch not working

@choudouhu Use the latest one (#80) instead of a year old patch :-)

Adding issue credits for reviewers and testers, and for @rfbrandsma from #2897276: Allow the attachment of AJAX exposed form behavior to a button of type submit .

Also, reclassifying this as a bug and retitling accordingly.

Also, reuploading #80 to get a new test run on Drupal 9.3, as well as a test-only patch to make sure that it fails as expected without the JS fix.

Responding to reviews that didn't get incorporated into the patch:

@lauriii in #67:

I would prefer allowing button[type=button] to trigger ajax too since it seems like there isn't any particular reason to not do that.

I agree with #68's answer to this that the ajax that we're triggering is effectively a form submit so it should only apply to type="submit" buttons. Also, this way, we match the behavior that's in Views for Drupal 7 in https://git.drupalcode.org/project/views/-/blob/7.x-3.x/js/ajax_view.js#L90, per the commit that happened in #12. If we discover a need to also trigger this for other types of buttons, we can have a followup issue to add that.

@droplet in #33:

IMO, we should make it new .class rather than tag[attr] if it's a feature request. and mark existing way @deprecated.

If we want to do this, let's do it in a followup. The existing code in HEAD targets input[type=submit], and button[type=submit] has essentially the same semantics, so refactoring from tag[attr] is out of scope for this issue.

Crediting people from another duplicate: #2998908: Views exposed form Ajax selector doesn't work on buttons.

Missed some in #96.

Pushed to 9.3.x. Tagging for a release notes mention, and added the release notes snippet to the issue summary.

Thank you to the many people who tested, reviewed, and rerolled this over the years.

By the way, there are several other JS files where input[type=submit] is in a selector and button[type=submit] isn't. And there might also be PHP code that treats them differently too. From #2998908-10: Views exposed form Ajax selector doesn't work on buttons:

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.

#1671190: Use <button /> form element type instead of <input type="submit" /> is probably the best place to discuss that for now. We may want to open new child issues of that one to fix specific bugs ahead of actually changing core to use <button> elements itself.