Bootstrap tab panel - How to go to a specific tab?

Question

Bootstrap tab panel - How to go to a specific tab?

Navigation

#1 by (1 votes)
#2 by (1 votes)
#3 by (0 votes)

1

I have, in PHP , a method whose code returns values, passing them to a View , as in the block below:

return view('PesquisaView')
     ->with('clientes',$resultadoClientes)
     ->with('advs',$resultadoAdvs)
     ->with('bps',$resultadoBPs)
     ->with('mensagemDoUploadRemessa',$avisoUpload);

However, this View has several tabs based on the Boostrap framework and 'return' displays the View on the first tab, the one that was set to 'active' at the beginning of page usage.

I would like the 'return' statement, which causes the View to open, directly display the tab I want, not 'default'. In the case of 'id' 'IdPaneCitiSearchRemessa'.

The html code that defines the tabs is

<ul class="nav nav-tabs">
     <li><a href="#idQExpert" data-toggle="tab">QExpert</a></li>
     <li>
       <a href="#idPaneCitiPesquisarRemessa" data-toggle="tab">Citibank - Remessa</a>
     </li>
     <li>
        <a href="#idPaneCitiPesquisar" data-toggle="tab">Citibank - Retorno</a>
     </li>
</ul>

Update:

Taking advantage of the valuable suggestion of @Virgilio Novic (as well as those of @wmengue and @massreuy), I changed my code to the following:

Method in PHP:

$tab = 2;
return view('PesquisaView')
 ->with('clientes',$resultadoClientes)
 ->with('advs',$resultadoAdvs)
 ->with('bps',$resultadoBPs)
 ->with('mensagemDoUploadRemessa',$avisoUpload);
 ->with('tab',$tab);

HTML markup:

<ul class="nav nav-tabs" id="myTab">
 <li class="{{$tab==1?'active':''}}"><a href="#idQExpert" data-toggle="tab">QExpert</a></li>
 <li class="{{$tab==2?'active':''}}"><a href="#idPaneCitiPesquisarRemessa" data-toggle="tab">Citibank - Remessa</a>
 </li>
 <li class="{{$tab==3?'active':''}}">
    <a href="#idPaneCitiPesquisar" data-toggle="tab">Citibank - Retorno</a>
 </li>
</ul>

After executing the method, it returns the value 2 for the $ tab variable, the View blade accepts the parameter and highlights the 'Citibank - Shipping' tab (the middle tab in the image below, which has the white background ), but notice that the content, which is a html form, does not appear.

However,ifthetabsareclicked,forpageexchange,bethefirstorthethirdand,backtothesecond,thentheformisrendered,asnewimagebelow:

That is, the click event does not happen when it becomes the active class via code.

php laravel bootstrap

asked by anonymous 27.06.2017 / 15:30

3 answers

Function mysql_insert_id () returns only zero Find the index of a certain value in a list in Python [duplicate]

score 1 · Answer 1

Do the following in your controller, add an extra variable containing the tab you want to mark as active, in this case:

return view('PesquisaView')
->with('clientes',$resultadoClientes)
->with('advs',$resultadoAdvs)
->with('bps',$resultadoBPs)
->with('mensagemDoUploadRemessa',$avisoUpload)
->with('activeTab', $activeTab);

Then create a new view with a treatment to receive this value. For example activeTab.blade.php com the following code:

@if($params['tab'] == 'idQExpert')
    active
@elseif($params['tab'] == 'idPaneCitiPesquisarRemessa')
    active
@elseif($params['tab'] == 'idPaneCitiPesquisar')
    active
@endif

And finally, in your main view, in each of the <li> elements add as follows:

<ul class="nav nav-tabs">
    <li class="@include('layouts/activeTab', ['params' => ['tab' => $activeTab]])">
        <a href="#idQExpert" data-toggle="tab">QExpert</a>
    </li>
    <li class="@include('layouts/activeTab', ['params' => ['tab' => $activeTab]])">
        <a href="#idPaneCitiPesquisarRemessa" data-toggle="tab">Citibank - Remessa</a>
    </li>
    <li class="@include('layouts/activeTab', ['params' => ['tab' => $activeTab]])">
        <a href="#idPaneCitiPesquisar" data-toggle="tab">Citibank - Retorno</a>
    </li>
</ul>

This will probably solve your problem.

score 1 · Answer 2

Send the information you need the tab to be the default when loading:

Code

$tab = 2;
return view('PesquisaView')
     ->with('clientes',$resultadoClientes)
     ->with('advs',$resultadoAdvs)
     ->with('bps',$resultadoBPs)
     ->with('mensagemDoUploadRemessa',$avisoUpload);
     ->with('tab',(is_null($tab)) ? 1 : $tab);

And in the code of blade do:

Html

<ul class="nav nav-tabs">
  <li @if($tab == 1) {{ 'class="active"' }} @endif ><a href="#">Home</a></li>
  <li @if($tab == 2) {{ 'class="active"' }} @endif ><a href="#">Profile</a></li>
  <li @if($tab == 3) {{ 'class="active"' }} @endif ><a href="#">Messages</a></li>
</ul>

score 0 · Answer 3

You can do a treatment in your code, sending a parameter to the view that will determine the active tab.

<li class="active">

The parameter will tell you when to enter this class or not. Or if you need it to be always fixed, just put it on the tab you need.