Not all views exposed forms auto-submit correctly (was: Clean up and improve auto-submit.js0

Just FYI, while I'm not at all against a patch to clean up the code, every time I see this title I am demotivated to actually look at it, because it's insulting and inaccurate.

I'm generally in favor of the cleanup you've got. My one comment:

+    // e.keyCode: key
+    // 16: shift
+    // 17: ctrl
+    // 18: alt
+    // 20: caps lock
+    // 33: page up
+    // 34: page down
+    // 35: end
+    // 36: home
+    // 37: left arrow
+    // 38: up arrow
+    // 39: right arrow
+    // 40: down arrow
+    //  9: tab
+    // 13: enter
+    // 27: esc
+    var discardKeyCode = [16, 17,18, 20, 33, 34, 35, 36, 37, 38, 39, 40, 9, 13, 27];

I'd rather have these combined so that it looks more like:

var discardKeyCode = [
  16, // shift
  // ... etc
  27 // esc
];

Just because the way it's commented isn't as intuitive what's going on I think.

I attached a patch here #1400802: Fix for auto-submit.js. Can we merge it with this one here? I added support for all input types and select lists.

Then we could just exclude textfields with $('... :not(input[type=text])')?

Ah cool, why we are wating? Let's commit!

I've just been waiting on the two of you to come to consensus. If you can test it and verify it all works as expected then I will commit it and probably right away.

We should also support file inputs! And also the HTML5 inputs. We could just get them with $('input') - why you didn't do that nod_?

Here is a D6 version of the patch in #8. The only difference is that .once() doesn't exist in D6 so I used the old way of -processed classes.

If I'm not mistaken, the attach() function should take a context argument as per http://drupal.org/node/756722#behaviors

Edit: Fixed the .add() in response to soulston's comment below

(diff is against the patched file)

diff --git a/js/auto-submit.js b/js/auto-submit.js
index 169878a..bc5a58e 100644
--- a/js/auto-submit.js
+++ b/js/auto-submit.js
@@ -27,7 +27,7 @@
  */

 Drupal.behaviors.CToolsAutoSubmit = {
-  attach: function() {
+  attach: function(context) {
     // 'this' references the form element
     function triggerSubmit (e) {
       if (!$(this).hasClass('ctools-ajaxing')) {
@@ -36,8 +36,8 @@ Drupal.behaviors.CToolsAutoSubmit = {
     }

     // the change event bubbles so we only need to bind it to the outer form
-    $('form.ctools-auto-submit-full-form')
-      .add('.ctools-auto-submit')
+    $('form.ctools-auto-submit-full-form', context)
+      .add('.ctools-auto-submit', context)
       .filter('form, select, input:not(:text, :submit)')
       .once('ctools-auto-submit')
       .change(function (e) {
@@ -66,7 +66,7 @@ Drupal.behaviors.CToolsAutoSubmit = {
       27  // esc
     ];
     // Don't wait for change event on textfields
-    $('.ctools-auto-submit-full-form input:text, input:text.ctools-auto-submit')
+    $('.ctools-auto-submit-full-form input:text, input:text.ctools-auto-submit', context)
       .once('ctools-auto-submit', function () {
         // each textinput element has his own timeout
         var timeoutID = 0;

I don't know whether this should be here or in a new issue (given that this patch hasn't actually been committed yet), but the following allows ctools auto submit to work with date_popup: (again, diff is against the patched file)

--- auto-submit.js
+++ auto-submit.js
@@ -81,6 +81,15 @@
               timeoutID = setTimeout($.proxy(triggerSubmit, this.form), 500);
             }
           });
+
+        // date popup autosubmit
+        if (Drupal.settings.datePopup) {
+          $(this)
+            .filter(function() {
+              return Drupal.settings.datePopup[this.id] !== undefined;
+            })
+            .change($.proxy(triggerSubmit, this.form));
+        }
       });
   }
 }

Shouldn't this:

.add('.ctools-auto-submit')

be

.add('ctools-auto-submit')

i.e. no dot when adding the class in lines 35 and 42:

Drupal.behaviors.CToolsAutoSubmit = {
  attach: function() {
    var timeoutID = 0;

    // Bind to any select widgets that will be auto submitted.
    $('select.ctools-auto-submit:not(.ctools-auto-submit-processed),.ctools-auto-submit-full-form *[type!=input]:not(.ctools-auto-submit-processed)')
      .addClass('.ctools-auto-submit-processed')
      .change(function() {
        $(this.form).find('.ctools-auto-submit-click').click();
      });

    // Bind to any textfield widgets that will be auto submitted.
    $('input[type=text].ctools-auto-submit:not(.ctools-auto-submit-processed),.ctools-auto-submit-full-form input[type=text]:not(.ctools-auto-submit-processed)')
      .addClass('.ctools-auto-submit-processed')
      .keyup(function(e) {
        var form = this.form;
        switch (e.keyCode) {
          case 16: // shift

Here's a patch against 7.x-1.x

Shouldn't this:

.add('.ctools-auto-submit')

be

.add('ctools-auto-submit')

i.e. no dot when adding the class in lines 35 and 42:

This comment is a bit confusing: you refer to add() (which should have a dot) but your patch below only modifies addClass() calls (which shouldn't have a dot) [and were already changed in all of nod_'s patches].

Although now that you've pointed it out, the .add() in nod_'s last patch should respect the context argument.

Ah - yeah I see now, sorry but I patched against dev and didn't add in the patches in this issue :(

Here's a complete version of nod_'s patch with the context arguments in place. Didn't solve my problem with the media browser though, but I think thats a special case:

MY bad, this does fix the media browser problem (I was using an out of date version of views)

I haven't tested the newer patches, but @nod_ patch in #8 seems to fix the issue with the Media module's "Views Media Library" view randomly redirecting the inside of the modal to the homepage when a search is performed.

Here is the issue #1319528: Media browser view library exposed form submit problem

Committed and pushed.

I'm wondering whether this patch might be a possible candidate to backport to 6.x.

i would so much love to help / see this happening for D6. Currently, the auto-submit implementation is basically unusable with textfields. I really love the functionality. What are the tasks for the backport?

The issue summary doesn't mention any API changes, so I'm not sure if this would be possible or not, but since you are mentioning backports, you might be interested in this #1505456: Add a "Backports" or "Drupal update" module to Drupal 7 core so that UI changes from Drupal 8 can be backported

By all means yes, please backport it.

However, 'needs review' isn't appropriate until it's actually backported. :)

Sorry, wasnt aware of which status is going to fit best - but obviously you are right :). Perfectly fine with path to be ported

Setting this on my todo-list

Hi guys,

First of all, thank you for the work you've already done to fix that issue. Much appreciated.

I just wanted to let you know that I still see it happening for Drupal 7. An easy way how you can reproduce it is just start typing something while previous AJAX request is still in progress.

I've spent some time looking at this issue and it looks like when AJAX request goes out the field that initiated it doesn't have "ctools-ajaxing" class on it. There is a logic that relies on that class that prevents another AJAX requests to go out until there is one in progress.

So in order to fix the issue I've done a small change:

function triggerSubmit (e) {
  var $this = $(this);
  if (!$this.hasClass('ctools-ajaxing')) {
    $this.addClass('ctools-ajaxing').find('.ctools-auto-submit-click').click();
  }
}

Basically I'm just adding the missing class.

It did the trick for me and hopefully will help others to get rid of that issue.

- Artem

Well, this is a bug-fix that makes the auto-submit work by cleaning up the class name with the extra dot in it. It doesn't contain all the other fixes from @nod_'s 7.x version, but it's a start.

The original poster stated that the change event was bubbling and triggering multiple submits. This also happens for me on D7: change the text in a textfield, wait, the form is submitted, click outside the textfield, the form is submitted again.

I saw in the D6 patches on this page that there is no change event handler for textfields, removed it from my D7 version and all my issues are solved! Here is a D7 patch.

Code in #34 works great for Drupal 7! But I'm not sure that we should add it in auto-submit function, because autosubmit isn't always work with ajax. Often it's just a common submit without ajax. So maybe functionality that ajaxify forms(for example views) should add this class when form is submitted.