Rails will_paginate and tabs

Question

I have a problem with working my tab along with will_pagination. When i press Tab 2, it will show the correct content, but when i press on the pagination link, example page 2. It will bring me back to my Tab 1 view. After this, when i press back Tab 2, it will appear page 2 content of Tab 2. The problem here is why does it bring my back to my Tab 1 view when i press on the pagination link in Tab 2.

My View Code

<div>
<ul class="nav nav-tabs" id="TabLength">
    <% @biscuit.each_index do |i| %>
      <% if i == 0 %>
        <li class="active"><a data-toggle="tab" href="#<%= @biscuit[i] %>"><%= @biscuit[i] %></a></li>
      <% else %>
        <li><a data-toggle="tab" href="#<%= @biscuit[i] %>"><%= @biscuit[i] %></a></li>
      <% end %>
    <% end %>
</ul>
<div class="tab-content">
  <% @biscuit.each_index do |i| %>
    <% if i == 0 %>
      <div class="tab-pane fade in active" id="<%= @biscuit[i] %>">
        <div class="row" id="PictureSetting">
            <% @testpage.each do |i| %>
              <div class="col-md-4" id="ProductPic">
                <%= image_tag(i.name , class:"img-thumbnail", size:"180x180") %>
              </div>
          <% end %>
        </div>
        <%= will_paginate @testpage, :param_name => 'user_page' %>
      </div>
    <% elsif i == 1 %>
      <div class="tab-pane fade" id="<%= @biscuit[i] %>">
        <div class="row" id="PictureSetting">
          <% @memberpage.each do |i| %>
              <div class="col-md-4" id="ProductPic">
                <%= image_tag(i.name , class:"img-thumbnail", size:"180x180") %>
              </div>
          <% end %>
        </div>  
        <%= will_paginate @memberpage, :param_name => 'choco_page' %>
      </div>
    <% else %>
      <div class="tab-pane fade" id="<%= @biscuit[i] %>">
        <div class="row" id="PictureSetting">
          <h1>hello</h1>
        </div>  
      </div>
    <% end %>
  <% end %>
</div>
</div>

Thanks

code from my answer should work now – dimakura Sep 14 '15 at 19:53 — dimakura, Sep 14 '15 at 19:53

score 2 · Accepted Answer · edited May 23 '17 at 11:58

2

Based on answer from here, you can design the following code for the problem:

<script>
  // open tab on click
  $('#TabLength a').click(function (e) {
    e.preventDefault();
    $(this).tab('show');

    // getting tab id
    var id = $(e.target).attr("href").substr(1);

    // change hash value for all pages
    $('ul.pagination > li > a').each(function(i, pageAnchor) {
      pageAnchor.hash = id;
    });
  });

  // assign tab id to location hash
  $("ul.nav-tabs > li > a").on("shown.bs.tab", function (e) {
    var id = $(e.target).attr("href").substr(1);
    window.location.hash = id;
  });

  // open initial hash
  var hash = window.location.hash;
  $('#TabLength a[href="' + hash + '"]').tab('show');

  // UPDATE
  $('ul.pagination > li > a').each(function(i, pageAnchor) {
    pageAnchor.hash = hash;
  });
</script>

It saves currently selected tab into location.hash. and selects it when you navigate to a new page.

edited May 23 '17 at 11:58

Community

1
1

answered Sep 14 '15 at 15:07

dimakura

7,575
17
36

After i use your code, there is one more problem. When i press Tab 2, page 2. It works fine now and does not jump back to Tab 1. However, when i press page 1 now, it jumps back to Tab 1 and not Tab 2 page 1. Please guide me on this – cleve yeo Sep 15 '15 at 08:42
I've added code to the script titled "UPDATE". Can you try with it? – dimakura Sep 15 '15 at 08:45
@dimakura i know it's a very old comment, but i came across to this problem. Though it works but the screen jumps. Do you have any idea why would that be or how to fix it? – Fay007 Sep 30 '20 at 16:18

Rails will_paginate and tabs

1 Answers1