Redirect back to a specific tab pane in Laravel

Question

I have a index view with 5 tabs. When I click on Hardware tab, this is what I see.

When click on create, I launch this Modal

As soon as I submit, I got an alert notification, and everything is store fine.

But it direct me to my first tab. How can I redirect back to my second tab ?

---

Store Function

public function store() {

        $inputs = Input::all();
        unset($inputs['_token']);


        $cpe_mac = $inputs['mac1'].$inputs['mac2'].$inputs['mac3'].$inputs['mac4'].$inputs['mac5'].$inputs['mac6'];

        $cpe = [];

        $cpe['cpe_mac'] = $cpe_mac;
        $cpe['bandwidth_max_up'] = (int)$inputs['max_up'];
        $cpe['bandwidth_max_down'] = (int)$inputs['max_down'];

        $json = json_encode($cpe);

        $url = 'http://172.16.139.129:1234/vse/vcpe';
        $ch = curl_init($url);
        curl_setopt($ch, CURLOPT_HTTPHEADER, array('Content-Type: application/json'));
        curl_setopt($ch, CURLOPT_POSTFIELDS, $json);
        curl_setopt($ch, CURLOPT_POST, 1);
        curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
        $result = curl_exec($ch);
        curl_close($ch);


        $result_json =  json_decode($result, true);

        $id = $inputs['account_id'];


        if ( $result_json['status'] == '200') {
        return Redirect::to('/account/'.$id.'/#hardware') ->with('success','The CPE was created succesfully!');
    } else {
        return Redirect::to('/account/'.$id.'/#hardware') ->with('error', $result_json['message']);
    }

    } 

---

Tab.blade.php

<!-- Nav tabs -->
  <ul class="nav nav-tabs">
    <li class=""><a href="#details" data-toggle="tab"><strong>Details</strong></a></li>
    <li class=""><a href="#hardware" data-toggle="tab"><strong>Hardware(s)</strong></a></li>
    <li class=""><a href="#access-methods" data-toggle="tab"><strong>Access Methods</strong></a></li>
    <li class=""><a href="#linked-networks" data-toggle="tab"><strong>Linked Networks</strong></a></li>
    <li class=""><a href="#options" data-toggle="tab"><strong>Options</strong></a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content mb30">

    @include('account.show.details')
    @include('account.show.hardwares')
    @include('account.show.access-methods')
    @include('account.show.linked-networks')
    @include('account.show.options')

  </div>

Answer 1

You can extract the tab name(#hardware) and pass it into the view. and in view you can do something like this

<li class="{{ empty($tabName) || $tabName == 'hardware' ? 'active' : '' }}"><a href="#hardware" data-toggle="tab"><strong>Hardware(s)</strong></a></li>

and similarly in the included tab contents, you will have a element with class="tab-pane". Also add this condition to that element, something like

<div id="hardware" class="tab-pane {{ !empty($tabName) && $tabName == 'hardware' ? 'active' : '' }}">

Answer 2

As far as you use hashes in your urls, it is more easier to do like this:

var url = document.location.toString();
if (url.match('#')) {
    $('.nav-tabs a[href=#'+url.split('#')[1]+']').tab('show') ;
}

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    window.location.hash = e.target.hash;
});

It will change hash on every tab click and open the tab if the page is loaded with any tab's hash.

Answer 3

I'm very late but here's a solution using withInput() and old(). Make sure the ids match

Tab navigation: Add an id in the nav component

<ul class="nav nav-tabs" id="nav-tab">
  <li><a href="#details" data-toggle="tab">Galleries</a></li>
</ul>

Tab pane:

<div class="tab-pane" id="details">

Function: Here we pass in the tab-pane id that is to be redirected using withInput()

return redirect()->back()->withInput(['tab' => 'details']);

Javascript: Here we use the old() helper to access the tab-pane id passed through withInput() and set that tab as active

$(document).ready(function () {
  $('#nav-tab a[href="#{{ old('tab') }}"]').tab('show')
});

That's it!