Views Exposed Filter, Throbber not removed on consecutive Ajax Call

Same here, let's see if we can discover why it happens.

In my case, I have Facets with exposed filters.
When I use the facets the throbber is removed, but when I use the exposed filter of type text, the throbber is added twice and only one is removed.
As a possible solution is to check if the progress element is set before adding it.

Thanks, the Merge request solution solved the problem for me.

Hi,
I still can not reproduce this issue.
However, I can not see any side effects when merging the MR. So, I merged it in dev and will create a new release.
Thanks for your work :)

I released the 2.1.1 version; please check your use case if possible.

a new release breaks the expected functionality🤯😳😑😟😕

@v.koval could you provide more information?
Steps to reproduce, captures...

The new release had broken the behavior of the throbber for me.

I have an Ajaxified Views block, and every single result row has my custom Views field. This field has a submit element, that uses an Ajax callback. So, when I submit the row field for the first time, I can see that Ajax is working and the status message appears afterward. But when I click the submit for the second time, the Ajax Throbber does not appear and the status message simply shows after the callback was processed.

However, the Views block I was describing above also has Facets with exposed filters, but it had worked as a charm before the new release. There were no issues with the Ajax loader not being removed when it was supposed to be.

Oh I am sorry to hear that. I will investigate it as soon as possible. For the time being, you can use the 2.1.0 release.
Are there any JS errors in the dev console?

Thanks for the reply!

I haven't noticed any errors in the console since the update. I believe that the progressIsSet function prevents Ajax from firing more than 1 time for a single element.

I quickly tried to reproduce it. These are my steps.

• Fresh install enabled devel, devel_generate and created 50 articles.
• Enabled ajax_loader and flags module (for ajax link/button).
• Created a simple table view with page display for articles with a relationship to flag
• Added the flag link as field
• Enabled Pager and Ajax
• All seems to work as expected

See the video as an example. Because the ajax call is fast on fresh installs you only see a flashing black rectangle but that is the animation I saved in the ajax_loader settings. The throbber the mounted and unmounted every time for every click on the flag link or pager.
https://www.loom.com/share/513007517ee84822933e88c0ee64fcaa?sid=18c151d3...

Hi, @mvogel! Here are my steps to reproduce the issue:

• Fresh install D10 with enabled devel_generate and ajax_loader;
• Generated 50 articles and created a View that shows title, image and my custom ajaxified field (code below);
• Added an ugly padding to the throbber, so it can be easily seen;
• Tested the field with the response on the page. Works only for 1 time per submit in my case.

The link with testing - https://www.loom.com/share/6d713b4f717943098ba9b4fe73b463d4

The code I use for my custom field:

/**
 * Ajax Loader test field.
 *
 * @ingroup views_field_handlers
 *
 * @ViewsField("ajax_loader_test")
 */
class AjaxLoaderTest extends FieldPluginBase {

  use UncacheableFieldHandlerTrait;

  public function query() {
    // Leave empty.
  }

  public function getValue(ResultRow $row, $field = NULL) {
    return '<!--form-item-' . $this->options['id'] . '--' . $row->index . '-->';
  }

  public function viewsForm(array &$form, FormStateInterface $form_state) {
    $form[$this->options['id']]['#tree'] = TRUE;

    $wrapper_id = $this->view->current_display . 'ajax-loader-field';
    $form['#attached']['library'][] = 'core/jquery.form';
    $form['#attached']['library'][] = 'core/drupal.ajax';
    $form['#prefix'] = "<div id='$wrapper_id'>";
    $form['#suffix'] = "</div>";
    unset($form['actions']['submit']);

    foreach ($this->view->result as $row_index => $row) {
      $form[$this->options['id']][$row_index] = [
        '#type' => 'submit',
        '#value' => $this->t('Click Me!'),
        '#name' => 'ajax-loader-field' . $row_index,
        '#row_index' => $row_index,
        '#entity' => $this->getEntity($row),
        '#attributes' => [
          'class' => [
            'button--ajax-loader-field',
            'use-ajax-submit',
          ],
        ],
        '#ajax' => [
          'callback' => [get_called_class(), 'ajaxCallback'],
          'wrapper' => $wrapper_id,
          'url' => Url::fromUserInput($form['#action']),
          'options' => [
            'query' => [
              FormBuilderInterface::AJAX_FORM_REQUEST => TRUE,
            ],
          ],
        ],
      ];
    }
  }

  public static function ajaxCallback(array $form, FormStateInterface $form_state) {
    $response = new AjaxResponse();
    $response->addCommand(new MessageCommand('Response!'));
    return $response;
  }
}

I can now reproduce this behavior with your steps.
It is still weird, with exposed filter form, pager and ajax link (a-tag) the this.progress.element is empty on consecutive ajax calls only with this viewsForm field this.progress.element is still defined.

Automatically closed - issue fixed for 2 weeks with no activity.

@EvilArgest and @v.koval could you please test the MR in #3423380 🐛 The ajax loader is being displayed only the first time on type throbber Needs review if it fixes your problem?

@mvogel it works for me!
Cheers!✌🏻