Bootstrap在出现错误消息后保留当前选项卡

时间:2015-06-04 00:07:16

标签: ruby-on-rails twitter-bootstrap ruby-on-rails-4 devise tabs

我在Rails 4上使用引导标签浏览用户配置文件(设计)。如果显示错误消息,我想保持当前选项卡打开。

例如,当用户提交新密码但输入错误的当前密码时,将显示设计错误消息,但它会切换回第一个选项卡。

我已经让当前标签在刷新时保持活动状态:

<script>
    $(document).ready(function() {
    if(location.hash) {
        $('a[href=' + location.hash + ']').tab('show');
    }
    $(document.body).on("click", "a[data-toggle]", function(event) {
        location.hash = this.getAttribute("href");
    });
});
$(window).on('popstate', function() {
    var anchor = location.hash || $("a[data-toggle=tab]").first().attr("href");
    $('a[href=' + anchor + ']').tab('show');
});
</script>

但不是在出现错误消息时。这是我的标签设置......

<div class="row">
  <div class="col-md-8 col-md-offset-2">
    <ul class="nav nav-tabs" style="margin-top: 80px" id="myTab">
        <li class="active"><a data-toggle="tab" href="#sectionA">Your Answers</a></li>
        <li><a data-toggle="tab" href="#sectionB">Change Password</a></li>
        <li><a data-toggle="tab" href="#sectionC">Edit Profile</a></li>
        <li><a data-toggle="tab" href="#sectionD">Administration</a></li>
    </ul>
    <div class="tab-content">

      <div id="sectionA" class="tab-pane fade in active">
        <% if @subarticles.blank? %>
          <br><p><strong>You have not answered any questions yet. <%= link_to "Click here", articlecreation_path, :onclick=>"window.open(this.href,'create_company', 'height=700, width=700');return false;" %> to learn how.</strong></p>
        <% else %>
        <div style="margin-top:10px; margin-bottom:50px">
          <table class="table table-striped">
            <thead>
              <tr>
                <th>Your Answers!</th>
                <th>Upvotes</th>
                <th>Downvotes</th>
               <th>View Answer</th>
               <th>Delete Answer</th>
              </tr>
            </thead>
            <tbody>
              <% @subarticles.each do |subarticle| %>
                <tr>
                  <td><font size="4" ><%= subarticle.article.title.camelize %></font></td>
                  <td><%= subarticle.get_upvotes.size %></td>
                  <td><%= subarticle.get_downvotes.size %></td>
                  <td><%=link_to 'View',article_subarticle_path(subarticle.article, subarticle),class:"btn btn-default"%></td>
                  <td><%=link_to 'Delete',  article_subarticle_path(subarticle.article_id, subarticle.id), class:"btn btn-danger",method: :delete, data: { confirm: 'Are you sure?' }%></td>
                </tr>
              <% end %>
            </tbody>
          </table>
        </div>
        <%end%>
      </div>

      <div id="sectionB" class="tab-pane fade">

          <%= simple_form_for(resource, :as => resource_name, :url => registration_path(resource_name), :html => { :method => :put, :role => 'form'}) do |f| %>

          <h3>Change password</h3>
          <%= devise_error_messages! %>

          <div class="form-group" style="margin-bottom:40px">
            <%= f.label :current_password %>
            <%= f.password_field :current_password, :autofocus => true, class: 'form-control' %>
          </div>
          <div class="form-group">
            <%= f.label :password %>
            <%= f.password_field :password, :autocomplete => 'off', class: 'form-control' %>
          </div>
          <div class="form-group">
            <%= f.label :password_confirmation %>
            <%= f.password_field :password_confirmation, class: 'form-control' %>
          </div>

          <%= f.submit 'Update', :class => 'btn btn-primary' %>
          <%= link_to "Sign out", destroy_user_session_path, :class=> 'btn btn-danger', :method => :delete %>

          <% end %>
      </div>

      <div id="sectionC" class="tab-pane fade">

      <h3>Edit Profile</h3>
      <%= devise_error_messages! %>

        <%= simple_form_for(resource, :as => resource_name, :url => registration_path(resource_name), :html => { :method => :put, :role => 'form'}) do |f| %>


        <p>Please enter your current password to make changes.</p>
        <div class="form-group" style="margin-bottom:40px">
          <%= f.label :current_password %>
          <%= f.password_field :current_password, :autofocus => true, class: 'form-control' %>
        </div>

        <div class="form-group">
          <%= f.label :email %>
          <%= f.email_field :email,  class: 'form-control' %>
        </div>

        <div class="form-group">
          <%= f.label :username %>
          <%= f.text_field :name, class: 'form-control' %>
        </div>

        <%= f.submit 'Update', :class => 'btn btn-primary' %>
        <%= link_to "Sign out", destroy_user_session_path, :class=> 'btn btn-danger', :method => :delete %>

        <% end %>
      </div>

      <div id="sectionD" class="tab-pane fade">
        <h3>Cancel Account</h3>
        <%= devise_error_messages! %>
        <p>Unhappy? We'll be sad to see you go.</p>
        <%= button_to "Cancel my account", registration_path(resource_name), :onclick => "return confirm('Are positively sure you want to cancel?')", :method => :delete, :class => 'btn btn-danger' %>
      </div>
    </div>
  </div>
</div>

最好的方法是什么?谢谢!

0 个答案:

没有答案