如何解决Drupal视图搜索中ID动态变化导致自定义重置按钮失效问题？

问题根源 #

Drupal处理AJAX表单（如Views搜索）时，会给表单元素ID添加随机后缀，导致原代码依赖固定ID的getElementById无法找到目标按钮，重置按钮在搜索后无法生成。

解决方案1：前端JS适配（基于Drupal Behaviors） #

改用属性前缀选择器匹配按钮，并利用Drupal的行为机制确保AJAX刷新后代码重新执行，同时避免重复插入按钮：

Drupal.behaviors.customResetButton = {
  attach: function (context, settings) {
    // 匹配ID以"edit-submit-site-search"开头的搜索按钮
    const searchBtn = context.querySelector('[id^="edit-submit-site-search"]');
    // 检查是否已存在自定义重置按钮
    const resetBtnExists = context.querySelector('.custom-reset-btn');

    if (searchBtn && !resetBtnExists) {
      searchBtn.insertAdjacentHTML('afterend', `
        <button class="button js-form-submit form-submit btn-danger btn icon-before custom-reset-btn" type="button" onclick="window.location.reload();">
          <span class="icon glyphicon glyphicon-trash" aria-hidden="true"></span> Reset
        </button>
      `);
    }
  }
};

关键修改点 #

• 使用[id^="edit-submit-site-search"]属性选择器：忽略ID后缀的随机部分，只匹配固定前缀。
• 基于Drupal.behaviors：页面初始加载和AJAX请求完成后都会触发attach方法，保证搜索后重置按钮能重新生成。
• 添加custom-reset-btn类并做存在性检查：防止多次插入重复按钮。
• 将按钮type改为button：避免误触表单提交，确保只执行页面刷新逻辑。

解决方案2：后端PHP修改（更稳定） #

通过自定义模块的hook_form_alter直接在Views搜索表单中添加重置按钮，完全避免前端选择器问题：

/**
 * Implements hook_form_alter().
 */
function YOUR_MODULE_form_alter(&$form, \Drupal\Core\Form\FormStateInterface $form_state, $form_id) {
  // 替换为你的Views搜索表单ID前缀，比如"views_exposed_form_my_view_page_1"
  if (strpos($form_id, 'views_exposed_form') !== FALSE && strpos($form_id, 'YOUR_VIEW_ID') !== FALSE) {
    $form['actions']['reset'] = [
      '#type' => 'button',
      '#value' => t('Reset'),
      '#attributes' => [
        'class' => ['button', 'btn-danger', 'icon-before'],
        'onclick' => 'window.location.reload();',
      ],
      '#prefix' => '<span class="icon glyphicon glyphicon-trash" aria-hidden="true"></span>',
    ];
  }
}

说明 #

• 替换YOUR_MODULE为你的自定义模块名称，YOUR_VIEW_ID为目标Views的ID。
• 后端生成的按钮会随表单一起渲染，不受AJAX刷新影响，稳定性更高。

内容的提问来源于stack exchange，提问作者B. Maximus