Is it possible to refresh a tab on click - Bootstrap tabs

Question

I've created two tabs, using PHP tab one is made to insert data to database and another to view the data from the database, someone suggested ajax, but i couldn't find the answer i want.

example code -

<ul class="nav nav-tabs" role="tablist">

    <li class="nav-item">
      <a class="nav-link active" data-toggle="tab" href="#home">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#menu1">Menu 1</a>
    </li>

  </ul>

  <div class="tab-content">

    <div id="home" class="container tab-pane active">
   <?php require("insert.php"); ?>
    </div>
    <div id="menu1" class="container tab-pane fade">
     <?php require("view.php"); ?>
    </div>
    
  </div>

at tab one, i insert data (PHP) and tab two i view the data in table (PHP), so after inserting, i have to refresh the whole page to view the updated data on tab two.

So is it possible to refresh tab two right after i insert data on tab two, so i can view updated data without refreshing the whole page? if this is already solved, please comment answer links.

Answer 1

It may seem crude, but i made it work using JavaScript.

$(document).ready(function(){
    
$(".t1").load("insert.php");
$(".t2").load("view.php");

$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
  var target = $(e.target).attr("href") // activated tab
  
  if(target=='#home')
  {
  $(".t1").load("insert.php");
  }
  else if(target=='#profile')
  {
  $(".t2").load("view.php");
  }
});

});

<ul class="nav nav-tabs" role="tablist">

    <li class="nav-item">
      <a class="nav-link active" data-toggle="tab" href="#home">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#profile">Menu 1</a>
    </li>

  </ul>

  <div class="tab-content">

    <div id="home" class="container tab-pane active t1">
   
    </div>
    <div id="profile" class="container tab-pane fade t2">
     
    </div>
    
  </div>