Изменение URL при выборе вкладки - PullRequest
Новая
       8

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

0 голосов
/ 15 мая 2018

У меня есть различные вкладки на моей странице с 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)

1 Ответ

0 голосов
/ 15 мая 2018

Загрузите 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.

...