load data using ajax call in bootstrap tabs from php mysql - php

Question

i am trying to load data dynamically in bootstrap tabs using php mysql.
<ul class="nav nav-tabs " role="tablist">
<li class="active col-md-3"><a data-toggle="tab" href="#home">Notes</a></li>
<li class="col-md-3"><a data-toggle="tab" href="#menu1">Question Bank</a></li>
<li class="col-md-3"><a data-toggle="tab" href="#menu2">Summary</a></li>
<li class="col-md-3"><a data-toggle="tab" href="#menu3">Videos</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
</div>
</div>
Now Problem is
1.make tab active when it get clicked
2.load data using ajax/jquery from db for each tab
for eg. in first tab 'home' i'm using this query
select c.title,c.description,c.content_url
from content_ref_table c inner join course_ref_table cf on c.course_id =cf.course_id
where c.title like '%eco%' and cf.courses = 'b.com'
all the data will be fetched in div's ,
what will be the solution for this problem

Answer 1

Please Try :
<ul class="nav nav-tabs " role="tablist">
<li class="active col-md-3"><a data-toggle="tab" onclick="GetDataFromDB('home');" href="#home">Notes</a></li>
<li class="col-md-3"><a data-toggle="tab" onclick="GetDataFromDB('menu1');" href="#menu1">Question Bank</a></li>
<li class="col-md-3"><a data-toggle="tab" onclick="GetDataFromDB('menu2');" href="#menu2">Summary</a></li>
<li class="col-md-3"><a data-toggle="tab" onclick="GetDataFromDB('menu3');" href="#menu3">Videos</a></li>
</ul>
Your responce div.
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
</div>
</div>
Please write jquery for ajax request.
<script>
function GetDataFromDB(tab_type){
$.post("ajax_page.php",
{
tab_type: tab_type
},
function(data, status){
data = JSON.parse(data);
$('#home').html(data);
});
}
</script>
Create ajax_page.php file for ajax responce.
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error)
{
die("Connection failed: ".$conn->connect_error);
}
if ($_POST['tab_type'] == 'home')
{
$sql = "select c.title,c.description,c.content_url
from content_ref_table c inner join course_ref_table cf on c.course_id =cf.course_id
where c.title like '%eco%' and cf.courses = 'b.com'";
$result = $conn->query($sql);
$jsonData = [];
if ($result->num_rows > 0)
{
// output data of each row
while ($row = $result->fetch_assoc()) {
$jsonData[] = $row;
}
}
echo json_encode($jsonData);
} else if ($_POST['tab_type'] == 'menu1')
{
}
$conn->close();