如何在ActiveAdmin中重载页面后跳转至指定标签页？

在ActiveAdmin中使用tabs组件，通过自定义按钮实现添加数组元素、重新排序数组元素等页面展示变更操作。但每次点击按钮触发页面重载后，都会回到第一个标签页。

请问能否通过传入标签参数，让页面重载后自动切换到目标标签页？是否需要在update方法或before_action only: [:index]中进行处理？

相关视图代码 #

div(style: 'margin: 0 10px;') do
  tabs do
    tab :bundles do
      ...
    tab :groups do
      active_admin_form_for :config_groups, url: add_ancestor_admin_config_group_path, method: :post do |f|
        f.inputs do
          f.input :new_ancestor_group,
                  label: "选择要添加的上级分组",
                  as: :select,
                  include_blank: false,
                  include_hidden: false,
                  collection: ConfigGroup.all.map { |cg| ["#{cg.name}", cg.id] }, # 显示名称，返回ID
                  multiple: false

          f.actions do
            f.submit ADD_ANCESTOR_BUTTON, button_html: { style: 'width:20%', display: 'inline', class: 'inline-form' }
          end
        end
      end
    end
  end
end

对应的member_action代码 #

member_action :add_ancestor, method: :post do
  # ...数据库操作...

  flash[:notice] = "这是测试提示！"

  redirect_to edit_admin_config_group_path(config_group), notice: "已添加配置分组 #{new_config_group}"
end

可以通过在URL中传递标签页参数的方式实现重载后自动切换到目标标签页，不需要修改update方法，只需调整表单提交和重定向逻辑，再配合简单的控制器或前端处理即可。

步骤1：修改表单，提交时携带目标标签页参数 #

在表单中新增一个隐藏字段，把当前标签页的标识（比如:groups）传递到后端：

active_admin_form_for :config_groups, url: add_ancestor_admin_config_group_path, method: :post do |f|
  f.inputs do
    # 新增隐藏字段，传递当前标签页名称
    f.input :active_tab, as: :hidden, input_html: { value: 'groups' }
    # 原有输入项...
    f.input :new_ancestor_group,
            label: "选择要添加的上级分组",
            as: :select,
            include_blank: false,
            include_hidden: false,
            collection: ConfigGroup.all.map { |cg| ["#{cg.name}", cg.id] },
            multiple: false

    f.actions do
      f.submit ADD_ANCESTOR_BUTTON, button_html: { style: 'width:20%', display: 'inline', class: 'inline-form' }
    end
  end
end

步骤2：修改member_action，重定向时携带标签页参数 #

在add_ancestor方法中获取提交的标签页参数，并重定向时附加到URL上：

member_action :add_ancestor, method: :post do
  # ...数据库操作...

  # 获取提交的活跃标签页，默认回到第一个标签页
  active_tab = params[:config_groups][:active_tab] || 'bundles'

  flash[:notice] = "这是测试提示！"

  # 重定向时将标签页参数附加到URL
  redirect_to edit_admin_config_group_path(config_group, active_tab: active_tab), notice: "已添加配置分组 #{new_config_group}"
end

步骤3：处理页面加载时的标签页切换 #

有两种实现方式，选其一即可：

方式一：控制器传递变量（原生框架逻辑）

在对应控制器的edit动作中，读取URL参数并传递给视图：

controller do
  before_action :set_active_tab, only: [:edit]

  private
  def set_active_tab
    @active_tab = params[:active_tab] || 'bundles'
  end
end

然后在tabs组件中指定默认激活的标签页：

tabs active: @active_tab do
  tab :bundles do
    ...
  tab :groups do
    ...
  end
end

方式二：前端JS自动切换（无需修改控制器）

在视图的tabs组件后添加JS代码，读取URL参数并触发标签切换：

div(style: 'margin: 0 10px;') do
  tabs do
    tab :bundles do
      ...
    tab :groups do
      ...
    end
  end

  script do
    raw <<~JS
      document.addEventListener('DOMContentLoaded', function() {
        const urlParams = new URLSearchParams(window.location.search);
        const activeTab = urlParams.get('active_tab');
        if (activeTab) {
          const tabButton = document.querySelector(`[data-tab="${activeTab}"]`);
          if (tabButton) tabButton.click();
        }
      });
    JS
  end
end

注意事项 #

• 若存在多个标签页，可通过JS动态获取当前激活的标签页标识，替换隐藏字段的硬编码值，适配所有标签页场景。
• 方式一更贴合ActiveAdmin的原生逻辑，推荐优先使用。

内容的提问来源于stack exchange，提问作者kmfsousa