2

this is my first question in here, but I've been lurking for long. I hope I can make it clear.

It happens that I'm developing an CI application, with Bootstrap 3 + tabs, and after I make a "form submit" the reload takes me to the first tab, instead of the last active tag.

<ul class="nav nav-tabs" id="tabs">
    <li class="active"><a href="#accion" data-toggle="tab">Acción</a></li>
    <li><a href="#observaciones" data-toggle="tab">Observaciones</a></li>
    <li><a href="#adjuntos" data-toggle="tab">Adjuntos</a></li>
</ul>

That's how my tabs are built, and the controller has a redirect() like this:

redirect(base_url().'/responderconsulta/index/'.$consulta_id.'#observaciones');

I haven't found a way to correct this. I hope I can get some help.

Thanks in advance.

left_
  • 63
  • 1
  • 11
  • This looks like the answer you are looking for http://stackoverflow.com/questions/18999501/bootstrap-3-keep-selected-tab-on-page-refresh – Paul Zepernick Feb 05 '15 at 21:38
  • 1
    Yes!! The second most voted answer was the solution! THANK YOU :D – left_ Feb 06 '15 at 12:18
  • @wlaedimir but you can use twitter bootstrap too, Of course, the expansion of global var requires us to the analysis of departmental motivation levels to reach the results. Do not you think? –  Feb 12 '15 at 13:22
  • @DeFirmo I'm sorry, I didn't understand. I'm **already** using Twitter Bootstrap. – left_ Feb 12 '15 at 13:26
  • @wlaedimir of course, you are right I am still, there are questions as to how the create models here will perhaps emphasize the relativity of conventional models of operation CRUD's. if you use Ajax you can meet the goal because the Internet protocols assume important positions in the establishment of information flow server/client. –  Feb 12 '15 at 13:31
  • @DeFirmo ok I guess now I understand. The models, controllers and overall CRUD operations are built by another person. My functions in this project are mostly front-end dev, and even when I wanted to put my hands on the functions and on the harder code, it's not part of my labor. Sadly :( – left_ Feb 12 '15 at 13:40
  • @wlaedimir yes, now you understand :D –  Feb 12 '15 at 13:42

2 Answers2

3

Thanks to @Paul Zepernick, in his comment he mentioned this post where this code makes this easy breezy.

$(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');
});

Thanks to all for you help, I really appreciate it!

Community
  • 1
  • 1
left_
  • 63
  • 1
  • 11
2

In your js file :

var hash = window.location.hash;
$('#tabs > li').removeClass("active");
$('#tabs').find('a[href='+hash+']').parent().addClass("active");

The goal is to detect the anchor at the end of the url and set active the good tab

Edit : Here's another alternative :

var hash = window.location.hash;
$('#tabs').find('a[href='+hash+']').click();
AdrienXL
  • 3,008
  • 3
  • 23
  • 39
  • 1
    Hey! Thank you very much, this worked pretty well. at least, the tab is selected, BUT, the problem is that the content it's not displaying. The correct active tab is active, but it's not displaying the content that belongs to it. Is there something missing? – left_ Feb 06 '15 at 12:03
  • It's because you have to apply the same logic to your tab-panels. As you didn't provide taht part of the code, I wasn't able to write that part of the code. I also thought at another way to do it, see my edit. – AdrienXL Feb 06 '15 at 12:15
  • 1
    yes! that edit worked as a solution too! Thank you very much @AdrienXL – left_ Feb 06 '15 at 17:50
  • @wlaedimir if any solution works, upvote it. this way you can help answerer and future visitor – Anwar Feb 12 '15 at 12:50
  • @Anwar I can't upvote :( It says that I haven't enough reputation. – left_ Feb 12 '15 at 12:54