Views Exposed Filter, Throbber not removed on consecutive Ajax Call

Hey, thanks for letting us know about this issue.

I'm sorry, but I couldn't reproduce the error you described. I set up ajax_loader, search_api, and search_api_db made some demo content with devel, and created a search-api view with a required full-text search filter.

Every time I ran multiple searches or used the pager without refreshing the page, the ajax loader was removed when it was supposed to be.

Could you tell me which theme you're using? I tested it with olivero and didn't have any problems. Is the error happening for you with olivero too?

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 behavior🤯

@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 Loader from appearing 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.

@EvilArgest and @v.koval could you please test the MR in #3423380 if it fixes your problem?

@mvogel it works for me!
Cheers!✌🏻