Redirect back to a specific tab pane in Laravel

天涯浪子 提交于 2019-12-19 10:27:10

问题


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>

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



回答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.




回答3:


$(document).ready(function(){
    $('a[data-toggle="tab"]').on('show.bs.tab', function(e) {
            localStorage.setItem('activeTab', $(e.target).attr('href'));
    });
    var activeTab = localStorage.getItem('activeTab');
    if(activeTab){
         $('#IDOFTAB a[href="' + activeTab + '"]').tab('show');
    }
});


来源:https://stackoverflow.com/questions/33747262/redirect-back-to-a-specific-tab-pane-in-laravel

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!