Remember last tab after redirect

Question

I have a complex view on Laravel with a lot of tabs and forms, the user can navigate on the tabs and do various form submits on every tab, after the submit the controllers returns the same view with a current tab variable, looks like this:

...Controller actions...

return view("store.tesla.user.components")
                ->with('tab', '3');

Every tab got an ID so when I go back to my view I just search for the active tab and put active with jQuery like this:

var tb_active = <?php echo $tab; ?>
$('#'+tb_active).addClass('active');

Actually it works, but I feel dirty mixing PHP+JS specially using Laravel framework and looks not so well done, so there are my question/s:

There is another way to do it better or more simple?

My view is extremly big and I have a lot of css classes, if I copy my code there it will be messy, so I fork a codepen with bootstrap tabs for better showing :)

https://codepen.io/Troyer/pen/MbGQPJ

HTML

<div class="container"><h1>Bootstrap  tab panel example (using nav-pills)  </h1></div>
<div id="exTab1" class="container"> 
<ul  class="nav nav-pills">
            <li class="active">
        <a  href="#1a" data-toggle="tab">Overview</a>
            </li>
            <li><a href="#2a" data-toggle="tab">Using nav-pills</a>
            </li>
            <li><a href="#3a" data-toggle="tab">Applying clearfix</a>
            </li>
        <li><a href="#4a" data-toggle="tab">Background color</a>
            </li>
        </ul>

            <div class="tab-content clearfix">
              <div class="tab-pane active" id="1a">
          <h3>Content's background color is the same for the tab</h3>
                </div>
                <div class="tab-pane" id="2a">
          <h3>We use the class nav-pills instead of nav-tabs which automatically creates a background color for the tab</h3>
                </div>
        <div class="tab-pane" id="3a">
          <h3>We applied clearfix to the tab-content to rid of the gap between the tab and the content</h3>
                </div>
          <div class="tab-pane" id="4a">
          <h3>We use css to change the background color of the content to be equal to the tab</h3>
                </div>
            </div>
  </div>


<!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

CSS

body {
  padding : 10px ;

}

#exTab1 .tab-content {
  color : white;
  background-color: #428bca;
  padding : 5px 15px;
}

#exTab2 h3 {
  color : white;
  background-color: #428bca;
  padding : 5px 15px;
}

/* remove border radius for the tab */

#exTab1 .nav-pills > li > a {
  border-radius: 0;
}

/* change border radius for the tab , apply corners on top*/

#exTab3 .nav-pills > li > a {
  border-radius: 4px 4px 0 0 ;
}

#exTab3 .tab-content {
  color : white;
  background-color: #428bca;
  padding : 5px 15px;
}

Thank you for your time.

If you have forms in each tab, then u know which form is for which tab, so u can pass the tab id, from controller itself, and use ur above js code. But if every tab does not have forms, then i guess what u r doing is correct and only way. — Purushottam zende, Dec 07 '16 at 09:06
@Purushottamzende There are some tabs only with information. I'm happy if it's the correct way then. :) — Troyer, Dec 07 '16 at 09:07
Try this [answer](http://stackoverflow.com/questions/14313270/jquery-ui-tabs-no-longer-supporting-cookie-now-what/14313315#14313315) — AddWeb Solution Pvt Ltd, Dec 07 '16 at 09:10
@AddWebSolutionPvtLtd Oh wow, a hidden input (I will use a div with data) would be a nice solution because I can persist the current tab selected there. Nice one ! — Troyer, Dec 07 '16 at 09:18

score 1 · Accepted Answer · edited May 23 '17 at 12:24

1

Have you tried hidden fields. You can set that tab active by read that hidden value like:

$( ".selector" ).tabs({ active: $('#your-hidden-fiel').val() });

See the full example.

edited May 23 '17 at 12:24

Community

1
1

answered Dec 07 '16 at 09:22

AddWeb Solution Pvt Ltd

21,025
5
26
57

score 1 · Answer 2 · answered Dec 07 '16 at 10:04

create an array in js below your content section

var pagedefaults = {
        activetab: "{{ $activetab }}",
};

Here $activetab is coming from your controller. Now you can use active tab value like pagedefaults.activetab in your javascript and make tab active. This can also be used in localisation and Ajax Routes.

Remember last tab after redirect

2 Answers2