After inclusion/exclusion setar active my tab-panel (Laravel)

Asked

Viewed 183 times

0

I am developing an application where it is possible to include services in a tab-panel and the other tab-panel it is possible to save other information, but when saving the record in the tab-panel of services, the view returns again to the main tab. I know the reason is due to the class active on the link to my tab-panel, but how should I set the asset after using the create:: or ->delete of Laravel 5.3?

Below is an example of my application.

inserir a descrição da imagem aqui

<ul class="nav nav-tabs">
    <li class="active">
        <a data-toggle="tab" href="#detalhes">Detalhes da OS</a>
    </li>
    <li class="">
        <a data-toggle="tab" href="#servicos">Serviços</a>
    </li>
</ul>
php laravel laravel-5

  • You can store the information in a field hidden and all clicks change the value in that field hidden, when making a request compare which item is to be with that class active. This tab is bootstrap?

  • 1

    Yes, Virgilio, I’m using the same bootstrap tab.

1 answer

0

Within the form have a field of the type hidden who is responsible for storing the last tab selected, in this example the name is tabSelected,

<form action="/tabpost" method="post">
    <input type="hidden" name="_token" id="token" value="{{ csrf_token() }}">
    <input type="hidden" id="tabSelected" name="tabSelected" value="{{isset($tabSelected)?$tabSelected:'#home'}}" />
    <div id="myTabs">
        <ul class="nav nav-tabs">
            <li role="presentation" class="{{isset($tabSelected)&&$tabSelected==='#home'?'active':!isset($tabSelected)?'active':''}}"><a href="#home">Home</a></li>
            <li role="presentation" class="{{isset($tabSelected)&&$tabSelected==='#profile'?'active':''}}"><a href="#profile">Profile</a></li>
            <li role="presentation" class="{{isset($tabSelected)&&$tabSelected==='#messages'?'active':''}}"><a href="#messages">Messages</a></li>
        </ul>
        <div class="tab-content">
            <div role="tabpanel" class="tab-pane{{isset($tabSelected)&&$tabSelected==='#home'?' active':!isset($tabSelected)?' active':''}}" id="home">home</div>
            <div role="tabpanel" class="tab-pane{{isset($tabSelected)&&$tabSelected==='#profile'?' active':''}}" id="profile">profile</div>
            <div role="tabpanel" class="tab-pane{{isset($tabSelected)&&$tabSelected==='#messages'?' active':''}}" id="messages">messages</div>
        </div>
    </div>
    <button>Enviar</button>
</form>
<script>
    $('#myTabs a').click(function (e) {
        $(this).tab('show');
        $('#tabSelected').val(e.target.hash);
        e.preventDefault();
    });
</script>

and in the event tab ($('#myTabs a').click(function (e)), passes the value of tab selected for the field hidden tabSelected ($('#tabSelected').val(e.target.hash);).

Within the div and ul of that tab in class has a code that will be generated the value active giving the selection of the last tab which has been chosen (if it is the first time, the first time tab is selected by pattern), watch closely at the code html.

So far only changes in the part of View, has a server request part that is demonstrated in these two routes, the first is the normal load, without saving any information or at least some kind of request, the other receives a request and returns to View the last tab selectioanda:

Route::get('tab', function()
{
    return view('tab');
});

Route::post('tabpost', function(Request $request)
{
    $data['tabSelected'] = $request->get('tabSelected');
    return view('tab', $data);
});

This is a functional example, which I have designed, can test and observe the behavior and make the appropriate changes to your code, any doubt just ask

Browser other questions tagged php laravel laravel-5

You are not signed in. Login or sign up in order to post.