Keep a Tab or Tabs in the same position when clicking on a button -Laravel

Question

I currently have a project that has tabs and within each tab has its respective table as shown in the image:

For this project I use Bootstrap tabs and for the tables I use DataTables.

 <nav>
  <div class="nav nav-tabs" id="nav-tab" role="tablist">
    <a class="nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true"><i class="fas fa-envelope"></i> EMISOR</a>
    <a class="nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false"><i class="fas fa-inbox"></i> RESPONSABLE</a>
    <a class="nav-link" id="nav-admin-tab" data-toggle="tab" href="#nav-admin" role="tab" aria-controls="nav-admin" aria-selected="false"><i class="fas fa-toolbox"></i> ADMIN</a>                 
 </div>
</nav>

My problem or doubt is that in the "APPROVAL" column there is a button that when clicked changes the status to approved or vice versa.

@if ($task->stade == "0")
<a href="{{ url('/administrator/task/'.$task->id.'/stade ')}}" class="btn btn-warning ">
   &#9866;
</a>
@else
<a href="{{ url('/administrator/task/'.$task->id.'/stade ')}}" class="btn btn-success ">
  &#10003;
</a>
@endif

And this is my controller

public function geTaskstade($id){
$task = Task::findOrFail($id);
if($task->stade == "0"):
   $task->stade = "1";
   $msg = "Yes";
else:
   $task->stade = "0";
   $msg = "off";
endif;
if($task->save()):     
   return back()->with('message',$msg)->with('typealert','warning');
endif;} 

I would like that when I click on the approval button it does not return to the main tab but stays in the one it was in.

Example: if I am in the administrator tab and I press the approve button it is sent but the page reloads and takes me to the sender tab I would like it to stay in the administrator tab when reloading.

When looking at the Bootstrap tabs I see that it has an active class, maybe I can make a function with JavaCcript that when clicking on APPROVAL does not change position, if so could anyone guide me on how to do it or another recommended way.

Answer 1

there have been comments about how it can be done with Javascript, but I wanted to add a version made with php for this.

First of all, after the information is processed in the controller file, we need to send which tab will be open when we return. For example;

public function geTaskstade($id){
$task = Task::findOrFail($id);
if($task->stade == "0"):
$task->stade = "1";
$msg = "Yes";
$tab = 1;
else:
$task->stade = "0";
$msg = "off";
$tab = 2;
endif;
if($task->save()):     
return back()->with('message',$msg)->with('typealert','warning')->with('tab', $tab);
endif
;} 

I add 'tab'.

Now we know which tab to open.

On the front side, we will change a class directly so that the relevant tab is open.

<ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item" role="presentation">
        <button class="nav-link @if(!session('tab') or (session('tab') and session('tab') == 1)) active @endif" id="home-tab" data-bs-toggle="tab" data-bs-target="#home-tab-pane" type="button" role="tab" aria-controls="home-tab-pane" aria-selected="true">Home</button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link @if(session('tab') and session('tab') == 2) active @endif" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile-tab-pane" type="button" role="tab" aria-controls="profile-tab-pane" aria-selected="false">Profile</button>
    </li>
</ul>
<div class="tab-content" id="myTabContent">
    <div class="tab-pane fade @if(!session('tab') or (session('tab') and session('tab') == 1)) show active @endif" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0">...</div>
    <div class="tab-pane fade @if(session('tab') and session('tab') == 2) show active @endif" id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">...</div>
</div>

In this way, we have determined which tab will be open with the 'tab' information we send from the back. Hope it's helpful for someone.