By using jQuery ajax and post methods, you can load data in different HTML components like tables, lists, dropdowns, etc. You may also load data in Bootstrap tabs by using the $.ajax or $.post method of jQuery.
In this tutorial, I will show you demos of using these methods where data will be loaded from a text file, as well as, by using a PHP file that connects to a MySQL database to retrieve data from its table.
The table data will be shown in a tab of Bootstrap without reloading the web page.
A demo to load data from a text file
In this demo, first I have created Bootstrap based tabs by using its built-in plug-in. Four tabs are created by built-in classes that are initiated as web page loads.
The fourth tab, “jQuery” is filled by using the jQuery ajax method. See this demo online and I will explain what code is used to accomplish that.
Code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
$.ajax({url:"ajax/jquery.txt",success:function(tabdata){
$("#jquerytab").append(tabdata);
}});
});
</script>
<style>
.nav-tabs
{
border-color:#004A00;
width:60%;
}
.nav-tabs > li a {
border: 1px solid #004A00;
background-color:#004A00;
color:#fff;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover{
background-color:#D5FFD5;
color:#000;
border: 1px solid #1A3E5E;
border-bottom-color: transparent;
}
.nav-tabs > li > a:hover{
background-color: #D5FFD5 !important;
border-radius: 5px;
color:#000;
}
.tab-pane {
border:solid 1px #004A00;
border-top: 0;
width:60%;
background-color:#D5FFD5;
padding:5px;
}
</style>
</head>
<body>
<div class="container">
<h3>A demo to load data from text file in Bootstrap Tab by $.ajax</h3>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li><a href="#hometab" role="tab" data-toggle="tab">Home</a></li>
<li><a href="#bstrap" role="tab" data-toggle="tab">Bootstrap</a></li>
<li><a href="#csstab" role="tab" data-toggle="tab">CSS</a></li>
<li class="active"><a href="#jquerytab" role="tab" data-toggle="tab">jQuery</a></li>
</ul>
</li>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane" id="hometab">Write something for home tab</div>
<div class="tab-pane" id="bstrap">Bootstrap is a mobile first web framework</div>
<div class="tab-pane" id="csstab">The CSS is used to style web pages!</div>
<div class="tab-pane active" id="jquerytab"></div>
</div>
</body>
</html>
You can see that the demo page shows jQuery tab opened as the web page loads. I have kept this tab as “active” by using the .active class.
Its tab is created just like three other tabs:
<li class="active"><a href="#jquerytab" role="tab" data-toggle="tab">jQuery</a></li>
Whereas, if you look at the tab pane’s area, this code is used:
<div class="tab-pane active" id="jquerytab"></div>
Still, no difference, except no text or content is given there, unlike all three other tabs. Now look at the <script> section in head tag:
<script>
$(document).ready(function(){
$.ajax({url:"ajax/jquery.txt",success:function(tabdata){
$("#jquerytab").append(tabdata);
}});
});
</script>
This is where the div of “jQuery” tab is called after using the $.ajax jQuery method. The ajax method loads data from the given text file which (if successful) will be assigned or appended to the “#jquerytab”, which is the id of jQuery tab.
A demo of $.post method to load data in Bootstrap tabs by PHP/MySQL
In this demo, I have used $.post jQuery method, rather than $.ajax. Also, instead of a text file, I have loaded data from the MySQL database by using the PHP script.
The script is called in the $.post method.
HTML, CSS and jQuery:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
$("#loaddata").click(function(){
$.post("fetchtab.php",function(postresult){
$("#products").html(postresult);
});
});
});
</script>
<style>
.nav-tabs
{
border-color:#B12926;
width:60%;
}
.nav-tabs > li a {
border: 1px solid #B12926;
background-color:#B12926;
color:#fff;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover{
background-color:#F9E0DF;
color:#000;
border: 1px solid #B12926;
border-bottom-color: transparent;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.nav-tabs > li > a:hover{
background-color: #F9E0DF !important;
border-radius: 5px;
color:#000;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.tab-pane {
border:solid 1px #B12926;
border-top: 0;
width:60%;
background-color:#F9E0DF;
padding:5px;
}
.demotbl {
}
.demotbl th{
padding:15px;
color:#fff;
text-shadow:1px 1px 1px #568F23;
border-bottom:3px solid #9ED929;
background-color:#49636D;
background:-webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.02, rgb(73,99,109)),
color-stop(0.51, rgb(73,99,109)),
color-stop(0.87, rgb(73,99,109))
);
background: -moz-linear-gradient(
center bottom,
rgb(73,99,109) 3%,
rgb(73,99,109) 52%,
rgb(73,99,109) 88%
);
-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
-moz-border-radius:5px 5px 0px 0px;
border-top-left-radius:5px;
border-top-right-radius:5px;
}
.demotbl td{
width:100px;
padding:10px;
text-align:center;
vertical-align: top;
background-color:#BDCDD2;
border: 1px solid #BED3AB;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
color:#000;
text-shadow:1px 1px 1px #fff;
}
</style>
</head>
<body>
<div class="container">
<h3>A demo to load data from MysQL DB in Bootstrap Tab by $.post</h3>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li><a href="#hometab" role="tab" data-toggle="tab">Home</a></li>
<li><a href="#reviews" role="tab" data-toggle="tab">Reviews</a></li>
<li><a href="#featurestab" role="tab" data-toggle="tab">Features</a></li>
<li class="active"><a href="#products" role="tab" data-toggle="tab">Products</a></li>
</ul>
</li>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane" id="hometab">Write something for home tab</div>
<div class="tab-pane" id="reviews">Reviews Tab / Add reviews here</div>
<div class="tab-pane" id="featurestab">Present features here</div>
<div class="tab-pane active" id="products"> <button type="button" class="btn btn-danger active" id="loaddata">Load Products Data</button></div>
</div>
</body>
</html>
PHP code:
< ?php
//Remove space in PHP tag
$dbhostname = 'localhost';
$dbusername = 'userid';
$dbpassword = 'password';
$conn = mysql_connect($dbhostname, $dbusername, $dbpassword);
if(! $conn )
{
die('Could not connect: ' . mysql_error());
}
echo 'MySQL Database Connected!'."<BR>";
mysql_select_db("testDB") or die(mysql_error());
echo "Database found and connected!"."<BR>";
$sql_statemanet = "select * from tbl_products";
$rec_select = mysql_query( $sql_statemanet);
if(! $rec_select )
{
die('Could not retrieve data: ' . mysql_error());
}
//Displaying fetched records to HTML table
echo "<table class='demotbl'>";
echo "<tr> <th>ID</th> <th>Product </th> <th>Quality </th> <th>Quantity </th></tr>";
// Using mysql_fetch_array() to get the next row until end of table rows
while($row = mysql_fetch_array( $rec_select )) {
// Print out the contents of each row into a table
echo "<tr><td>";
echo $row['Product_ID'];
echo "</td><td>";
echo $row['Product_Name'];
echo "</td><td>";
echo $row['Product_Quality'];
echo "</td><td>";
echo $row['Product_Quantity'];
echo "</td></tr>";
}
mysql_close($conn);
?>
The jQuery post method will execute as you click the button “Load Products Data” unlike the above example where it loaded data as the web page opened. I used this to show the data loading without refreshing the web page by using Ajax’s post method of jQuery.
The line:
$.post(“fetchtab.php”,function(postresult){
calls the fetchtab.php file, that connects to the MySQL database server and retrieves the product information from the specified table in SQL query. The file also returns the HTML table with the DB table’s data as a response to the request in $.post method.
The postresult will get the returned information (if successful) and is assigned to products pane of Bootstrap tabs.
$("#products").html(postresult);
In the markup section, the tabs are created just like the above example.
You can also see the <style> tag in the <head> section that contains the style for tabs which overrides the Bootstrap classes for tabs. Along with it, classes for displaying HTML tables can also be seen there.
Feel free to change styles, if you liked these demos!