Combine `redirect_to` and the `anchor` option

#ruby #rails #webdev

Often you’ll have an application screen like this:

After editing information about an employee, you’ll redirect back to the Company Directory page.

For a bit of extra polish, you can redirect with an anchor to automatically scroll the browser to the recently updated item and maintain your position in the list.

You can combine this with the most underrated Rails helper – dom_id – for a really clean solution.

Usage

Your controller will be exactly the same, just tack on the anchor option to the path helper when redirecting.

class EmployeesController < ApplicationController
  include ActionView::RecordIdentifier # adds `dom_id`

  def update
    @company = Company.find(params[:company_id])
    @employee = @company.employees.find(params[:id])

    if @employee.update(employee_params)
      redirect_to companies_path(@company, anchor: dom_id(@employee),
        notice: "Updated #{@employee.name}!"
    else
      render :edit, status: :unprocessable_entity
    end
  end

  private

  def employee_params
    params.require(:employee).permit(:name, :department, :location)
  end
end

Just make sure you use dom_id in your view as well:

<div class="flex flex-col divide-y">
  <%= @company.employees.each do |employee| %>
    <%= content_tag :div, id: dom_id(employee) do %>
      <div class="flex flex-col space-y-2">
        <span class="font-bold"><%= employee.name %></span>
        <span class="text-gray-400">
          <%= employee.department %>
          &middot;
          <%= employee.location %>
        </span>
      </div>
    <% end %>
  <% end %>
</div>