在php mysql的bootstrap选项卡中使用ajax调用加载数据

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();