Contrib.social

Simplify AJAX pager workaround

Open on Drupal.org →
Created on 14 August 2025, 2 days ago

Problem/Motivation

In 📌 Refactor translation UI/form Active , I added a custom pager element and a custom pager theme function to work around the problem reported in the following core tickets (we have many):

  1. 🐛 Pager, tablesort links in a form corrupt when reloaded via AJAX (e.g., via exposed filter)) Active
  2. 🐛 Prevent _wrapper_format and ajax_form parameters from bleeding through to generated URLs Active
  3. 🐛 Fixed pagination and sorting of tables on pages with ajax Needs work

But today I just realized that the bug can be worked aroung much easier with just a tiny pager parameter customization and with a little JavaScript. (Credit belongs to joegl → for the comment at 2504709 🐛 Prevent _wrapper_format and ajax_form parameters from bleeding through to generated URLs Active )

Proposed resolution

  1. In the Babel translate form, specify pager #parameters you find at babel.theme.inc#L81-L86 as having empty (string) values
  2. Create a custom javascript, attach it to the translate-form library, and specify a behavior targeting pager links on the translate form which:
    1. Removes the 'ajax_page_state', 'ajax_form', '_wrapper_format', '_drupal_ajax' query arguments from the pager link's URLs
    2. Then, adds the use-ajax class to the pager links
    3. Then, invokes Drupal.ajax.bindAjaxLinks() on the pager links
  3. Use Drupal's factory pager on the translate edit form.
  4. Delete class BabelPager.php
  5. Delete functions template_preprocess_pager__babel and _babel_process_babel_pager. If babel.theme.inc becomes empty, then delete the entire file.
  6. Delete declaration of pager__babel theme function. If the theme hook becomes empty then delete the hook.

Remaining tasks

Also add some test coverage:

  1. In a JS test, when using pager, there should be an AJAX request performed, and after it's finished we should see different table rows than initially.
  2. Clicking the initial page's link should also trigger AJAX and we should see the same table rows as we did initially.
  3. Demonstrating a link opened into a new page / tab: After the steps above were performed, parse one of the pager links, then visit the path. You should be navigated to the Babel translate form, with the appropriate filters being set, and you must arrive to the right page.

User interface changes

Nothing.

API changes

Nothing.

Data model changes

Nothing.

📌 Task
Status

Active

Version

1.0

Component

Code

Created by

🇭🇺Hungary huzooka Hungary 🇭🇺🇪🇺

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @huzooka
  • Comment 2 days ago →
    🇭🇺Hungary huzooka Hungary 🇭🇺🇪🇺
  • Comment 2 days ago →
    🇭🇺Hungary huzooka Hungary 🇭🇺🇪🇺

    Some inspirational spagetti code:

    once('babel.pager_links', 'babel-form .pager-wrapper a[href]', element).forEach((pagerLink) => {
  const $linkElement = $(pagerLink);
  let href = $linkElement.attr('href');
  if (href) {
    const parts = href.split('?');
    if (parts.length > 1) {
      queryFragment = parts[1].split('#');
      let queries = queryFragment[0].split('&');
      if (queries) {
        const queriesCleaned = [];
        queries.keys().forEach((k) => {
          if (!['ajax_page_state', 'ajax_form', '_wrapper_format', '_drupal_ajax'].includes(queries[k].split('=')[0])) {
            queriesCleaned.push(queries[k]);
          }
        })
        queries = queriesCleaned.join('&');
        href = parts[0] + '?' + queriesCleaned.join('&');
        if (queryFragment.length > 1) {
          href += '#' + queryFragment[1];
        }
      }
    }
  }

  $linkElement.attr('href', href);
  $linkElement.classList.add('use-ajax');
});
contrib.social Blog FAQ Discussions
Production build 0.71.5 2024