Load the PHP contents only after switching a nav tab

November 30, 2021

I have 10 tabs on my project, each of them will fetch some values from API using PHP.
It takes 10-15 seconds to load the page every time (since it updates the values for all 10 Tabs)

How do i load content only after switching a tab?

Load TAB1 at start, then only after clicking TAB2 or TAB3 then load their content, but do not load them at start

Example:
https://jsfiddle.net/t52mwLoc/

<div class="col-md-6">
    <div class="card">
    <div class="card-body">

    <h4 class="card-title">Default Tab</h4>
                          
                          
                                                <!-- Nav tabs -->
    <ul class="nav nav-tabs" role="tablist">

      <li class="nav-item"> <a class="nav-link active show" data-toggle="tab" href="#tab1" role="tab" aria-selected="true">TAB1</a> </li>
      
      <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#tab2" role="tab" aria-selected="false"> TAB2</a> </li>
                            
      <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#tab3" role="tab" aria-selected="false"><span class="hidden-sm-up"> TAB3</a> </li>
                            
    </ul>

<!-- Tabs -->
<div class="tab-content tabcontent-border">
<div class="tab-pane active show" id="tab1" role="tabpanel">
<div class="p-20">
Load this content... [TAB1]
</div>
</div>
<div class="tab-pane  p-20" id="tab2" role="tabpanel">some PHP... Load this ONLY after clicking [TAB2]</div>
<div class="tab-pane p-20" id="tab3" role="tabpanel">some PHP... Load this ONLY after clicking [TAB3]</div>
</div>
</div>
</div>
</div>
                    
                    
                    
                    
                    
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

>Solution :

Some simple thing you can do is this. live example here

<!DOCTYPE html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
    function initialLoad(){
      $('#loader').load("page1.php");
    }
    </script>
</head>
<body onload="initialLoad()">
  Click on buttons to load different pages <br/>

  <button style="margin-left: 20px" class="btn btn-primary" onclick="load(1)"> Page 1 </button>
  <button style="margin-left: 20px" class="btn btn-primary" onclick="load(2)"> Page 2 </button>
  <button style="margin-left: 20px" class="btn btn-primary" onclick="load(3)"> Page 3 </button>
  <button style="margin-left: 20px" class="btn btn-primary" onclick="load(4)"> Page 4 </button>
  <button style="margin-left: 20px" class="btn btn-primary" onclick="load(5)"> Page 5 </button><br/><br/>

  <div class="load" id="loader">
  </div>
  <h3>You can check the network tab to see which page is getting loaded</h3>

  <script>
  function load(page){
    var thePage = "page"+page+".php"
    $('#loader').load(thePage);//assuming u have page1.php page2.php like this
  }
  </script>
</body>
</html>

For any queries comment down.