我在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>
最好的方法是什么?谢谢!