Level 67
@evooms123 You can use Javascript to open the tab once your search result is successful.
Jan 18, 2021
8
Level 1
Bootstrap tab and search bar
Hello everyone,
Hope you're fine.
Right now, I have several tabs :
<nav class="nav nav-tabs">
<a class="nav-item nav-link active " href="#tab1" data-toggle="tab">1</a>
<a class="nav-item nav-link" href="#tab2" data-toggle="tab">2</a>
<a class="nav-item nav-link" href="#tab3" data-toggle="tab">3</a>
<a class="nav-item nav-link" href="#tab4" data-toggle="tab">4</a>
<a class="nav-item nav-link" href="#tab5" data-toggle="tab">Search</a>
</nav>
Into the first 2 tabs, I've a list of article (its working well). Into the 5th tab, I have a search bar. What I want is that when I press "search", the result will be displayed under the search button. Right now, It redirect me to the 1st tab.
My form :
<form method="GET" action="{{ route('admin.liste.article.accueil.article') }}" class="mt-4 background_form">
<div class="form-group col-md-4">
<input class="form-control" name="rechercher" type="text" placeholder="Nom de la recette, mot clés..." aria-label="Search" value="{{ request()->query('recherche') }}">
</div>
<div class="form-group col-md-2">
<select id="inputState" class="form-control" name="type_article">
<option></option>
@foreach ($type_articles as $type_article)
<option value="{{ $type_article->type_article_id }}">{{ $type_article->libelle }}</option>
@endforeach
</select>
</div>
<div class="form-group col-md-3">
<input class="form-control" type="text" placeholder="Exemple : 2021-02-29" name="date" value="{{ request()->query('date') }}">
</div>
<div class=" col-md-2 align-self-center mt-3">
<button type="submit" class="form-control btn-sm btn-custom mb-2">Trouver</button>
</div>
</form>
Is there any way to stay at the tab number 5th and display the result there ?
Cordially
Level 1
I should use hide.bs.tab ?
Level 2
No, you should add this when rendering a search page.
$('#tab5').tab('show');
But, maybe it is enought to add the tab ID to the query:
<form method="GET" action="{{ route('admin.liste.article.accueil.article') }}#tab5" class="mt-4 background_form">
(I cannot remember if this tab can use it by default or not, but worth a try...)
Level 1
I've got this : http://localhost/admin/liste-article%20?rechercher=Orange&type_article=&date=#recherche and its a 404 not found error.
Level 50
This is what you are looking for. Probably the best explanation I have seen so far.
https://talltips.novate.co.uk/tabbed-content-using-alpine-js
Level 1
With that, I should remove the bootstrap nav tab if I understand well ?
Level 50
Yes you do not need any bootstrap at all!
Level 1
I'd prefer to stay with Bootstrap since I'm using it. Thanks for the advise :)
I've seen that I can use something like that Route::currentRouteName() == 'users') ? 'active' : '' }}" data-toggle="tab" but didn't work..
Please or to participate in this conversation.