Изменение URL-адреса при выборе вкладки

У меня есть различные вкладки на моей странице с URL-адресом profile, и когда вкладка выбрана, я хочу, чтобы URL-адрес изменился с profile на profile/*selected_tab_name*. URL-адрес изменяется на то, что мне нужно, когда данные сохраняются или после отправки формы на желаемой вкладке. Я хочу, чтобы URL-адрес изменился один раз при нажатии на вкладку. Кто-нибудь может мне с этим помочь!

Код контроллера

class ProfileController < ApplicationController
  before_action :set_user, only: %i[index update_profile]

  def index

    @address = if @user.address
                 @user.address
               else
                 Address.new
               end
  end

  def update_profile
    respond_to do |format|
      if @user.update(user_params)
        format.html { redirect_to profile_index_path, notice: 'Profile was successfully updated.' }
      else
        format.html { render :index }
      end
    end
  end

  def change_password
   @user = current_user
    if @user.update_with_password(user_password_params)
      redirect_to root_path
    else
      render "index"
    end
 end

private

  def set_user
    @user = User.find(current_user.id)
  end

  def user_params
    params.require(:user).permit(:name)
  end

  def address_params
    params.require(:user).permit(address: %i[area state country])
  end

  def user_password_params
    params.require(:user).permit(:password, :password_confirmation, :current_password)
  end
end

routes.rb

resources :profile do
   collection do
     patch 'update_profile'
     patch 'change_password'
   end
 end

Посмотреть код

<li class = "nav-item m-tabs__item">
          <a class = "nav-link m-tabs__link active" data-toggle = "tab" href = "#m_user_profile_tab_1" role = "tab">
            <i class = "flaticon-share m--hide"></i>
            Update Profile
          </a>
        </li>
        <li class = "nav-item m-tabs__item">
          <a class = "nav-link m-tabs__link" data-toggle = "tab" href = "#m_user_profile_tab_2" role = "tab">
            Change Password
          </a>
        </li>
        <li class = "nav-item m-tabs__item">
          <a class = "nav-link m-tabs__link" data-toggle = "tab" href = "#m_user_profile_tab_3" role = "tab">
            Settings
          </a>
        </li>

журнал терминала

Started PATCH "/profile/change_password" for 127.0.0.1 at 2018-05-15 10:20:55 +0530
Processing by ProfileController#change_password as HTML
 Parameters: {"utf8"=>"✓", "authenticity_token"=>"KZDdXW/q89Iq2YBV0aobPi8hNXsn7sicGYgKs5/OOM0JF/1F8QOvHJdx9/S3st45VE1TrBWoJqmJIQage3QiyQ= = ", "user"=>{"current_password"=>"[FILTERED]", "password"=>"[FILTERED]", "password_confirmation"=>"[FILTERED]"}, "commit"=>"Save password"}
 User Load (0.4ms)  SELECT  `users`.* FROM `users` WHERE `users`.`id` = 1 ORDER BY `users`.`id` ASC LIMIT 1
"============================ = "
  (0.2ms)  BEGIN
 SQL (0.3ms)  UPDATE `users` SET `encrypted_password` = '$2a$11$w14M.QgK7gBWtz.UyKamr.OdKn.O/gm9h/Vgb28uzaSZcH1SU7dSO', `updated_at` = '2018-05-15 04:50:55' WHERE `users`.`id` = 1
  (8.3ms)  COMMIT
Redirected to http://localhost:3000/
Completed 302 Found in 251ms (ActiveRecord: 9.1ms)

Это очень похоже на вопрос, заданный вчера stackoverflow.com/questions/50323880/…

Subash 15.05.2018 07:41
Стоит ли изучать PHP в 2026-2027 годах?
Стоит ли изучать PHP в 2026-2027 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
0
1
255
1

Ответы 1

Загрузите Redmine, чтобы получить отличные примеры кодирования на Rails.

Он выполняет трюк «изменить URL-адрес при выборе вкладки» следующим образом:

function showTab(name, url) {
  $('#tab-content-' + name).parent().find('.tab-content').hide();
  $('#tab-content-' + name).parent().find('div.tabs a').removeClass('selected');
  $('#tab-content-' + name).show();
  $('#tab-' + name).addClass('selected');
  //replaces current URL with the "href" attribute of the current link
  //(only triggered if supported by browser)
  if ("replaceState" in window.history) {
    window.history.replaceState(null, document.title, url);
  }
  return false;
}

Сама вкладка устанавливает для своего onclick значение "showTab('#{tab[:name]}', this.href); this.blur(); return false;". Итак, очевидно, что this.href переходит в url, затем в window.history.replaceState.

Другие вопросы по теме