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>
Advertisement
Answer
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.