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>

Solution 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' : '' }}">

Solution 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.

Solution 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!

Comments

[code-8]

Nice blade solution. I like it.

[code-8]

I did that, I got my tab to highlight now, but the content inside that tab didn't change/update to the hardware tab. It shows the content inside the details(default) tab. Do you know how to fix it ?

[Milan Maharjan]

You might have something inside like this inside your tab details page, add the same condition like above in the details page like this <div id="hardware" class="tab-pane {{ !empty($tabName) && $tabName == 'hardware' ? 'active' : '' }}">

[code-8]

Can you be specific please ?

[code-8]

I like your answer also, but the page is refreshing like crazy. I've tried using e.preventDefault(); and it still happend, do you know how to stop that ?

[Milan Maharjan]

inside your account.show.hardwares view there is a element with class = "tab-pane" . Inside that add the above ternary condition to make it active.

[code-8]

Works perfectly. Thanks for your back-up comments. :)

[code-8]

Maybe you should update your answer a little bit. There are 2 places that needed to that ternary operator.

[Maxim Lanin]

@ihue refreshing when?

[Maxim Lanin]

@MilanMaharjan It's a good option if you want to copy-past lots of ternary operators and duplicate them every time you create a tab or change them every time you change tabs ))

[code-8]

When I click on my tabs.

[Maxim Lanin]

I think this happens because of a JS error in your page. Take a look in your browser console.

[Thomas Richter]

please provide some more information about your code

[spn]

Hi, how to keep old value on each field when redirected to old tab?

[Ronish]

Just using <input value="{{ old('input_name') }}" > should work. If that doesn't, work try passing Input::all() in withInput() along with your tab id