AJAX / Post in jQuery to load data from text / MySQL in Bootstrap tabs
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.
See online demo and code
You can see, the demo page shows jQuery tab opened as web page loads. I have kept this tab as “active” by using the .active class.
I assume you already have an idea about how to create Bootstrap tabs. The focus is loading data by using $.ajax call. For that, look at the “jQuery” tab’s tag.
Its tab is created just like three other tabs:
|
1 |
<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:
|
1 |
<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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<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.
You may see and get the complete code in the demo page along with seeing the output.
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. Have a look at the online demo:
See online demo and code
Consider following code in the <script> section of <head> tag:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<script> $(document).ready(function(){ $("#loaddata").click(function(){ $.post("fetchtab.php",function(postresult){ $("#products").html(postresult); }); }); }); </script> |
The jQuery post method will execute as you click the button “Load Products Data” unlike the above example where it loaded data as 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 products information from the specified table in SQL query. The file also returns the HTML table with 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.
|
1 |
$("#products").html(postresult); |
In the markup section, the tabs are created just like the above example:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<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> |
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 table can also be seen there.
Feel free to change styles, if you liked these demos!