是否可以在单击时刷新选项卡 - 引导选项卡

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>