Tysweezy Tysweezy - 7 months ago 491
HTML Question

Dynamic Bootstrap Tabs using PHP/MySQL

So I've been tackling this problem for a while now and I can't seem to get it to work. I have a category table and a link in my database. I'm trying to display the "category" title as the tab and the "link" as my tab content.

Let me share my code and I'll explain the problem:

<ul class="nav nav-tabs" id="lb-tabs">
<?php $sqlCat = $db->query('SELECT `tab_title` FROM `category`'); ?>

<?php
foreach ($sqlCat as $row):

echo '<li><a href="#' . $row['tab_title'] . '" data-toggle="tab">' .
$row['tab_title'] . ' </a></li>';

endforeach;

?>


</ul>

<div class="tab-content">

<?php foreach ($sqlCat as $row2):

$tab = $row2['tab_title'];?>


<div class="tab-pane active" id="<?php $row['tab_title']; ?>">

<div class="links">

<ul class="col">

<?php
$items = $db->prepare('SELECT u_links.title, u_links.link, u_links.tid, category.id, category.tab_title
FROM u_links, category
WHERE category.id = u_links.tid
ORDER BY category.id ');
$items->execute();


while ($r = $items->fetch(PDO::FETCH_ASSOC)) {
echo '<li>' . $r['title'] . '</li>';
}

?>

</ul>

</div>

</div><!-- /tab-pane -->



<?php endforeach; ?>



</div>


This current code is not displaying the content in the "tab-content" div. I've tried different ways like this for example:

$tab = '';
$content = '';
$link = '';



$tab_title = null;

while($row = $items->fetch(PDO::FETCH_ASSOC)) {


$link = '<li>' . $row['title'] . '</li>';
if ($tab_title != $row['tab_title']) {

$tab_title = $row['tab_title'];

$tab .= '<li><a href="#' . $row['tab_title'] . '" data-toggle="tab">' .
$row['tab_title'] . ' </a></li>';

$content .= '<div class="tab-pane active" id="' . $row['tab_title'] . '"><div
class="links"><ul class="col">' . $link . '</ul></div></div><!-- /tab-pane //
support -->';


}



}


With this code I either get as too many tabs(as many items within the category) which I only want one tab for many items(links). Or I'll only get one link per section and doesn't output that row from the database.

If anyone can help me out with this, it will be much appreciated! :) Thank you.

Answer

Ok, so I think the issue is how you set your .tab-pane id's. Right now there is but no "echo" so nothing is being output there.

I put together a working demo, I did change some part of your code, but very minor stuff which I tried to comment:

<!-- START OF YOUR CODE -->
    <ul class="nav nav-tabs" id="lb-tabs">
    <?php 
    // I just made an array with some data, since I don't have your data source
        $sqlCat =   array(
                        array('tab_title'=>'Home'),
                        array('tab_title'=>'Profile'),
                        array('tab_title'=>'Messages'),
                        array('tab_title'=>'Settings')
                    );

        //set the current tab to be the first one in the list.... or whatever one you specify
        $current_tab = $sqlCat[0]['tab_title'];
    ?>
    <?php 
    foreach ($sqlCat as $row):
        //set the class to "active" for the active tab.
        $tab_class = ($row['tab_title']==$current_tab) ? 'active' : '' ;
        echo '<li class="'.$tab_class.'"><a href="#' . urlencode($row['tab_title']) .  '" data-toggle="tab">' .           
        $row['tab_title'] .  ' </a></li>';
    endforeach;
    ?>
    </ul><!-- /nav-tabs -->
    <div class="tab-content">
        <?php foreach ($sqlCat as $row2): 
        $tab = $row2['tab_title'];
        //set the class to "active" for the active content.
        $content_class = ($tab==$current_tab) ? 'active' : '' ;
        ?>
        <div class="tab-pane <?php echo $content_class;?>" id="<?php echo $tab; //--  this right here is from yoru code, but there was no "echo" ?>">
            <div class="links">
                <ul class="col">
                    <?php  
                    // Again, I just made an array with some data, since I don't have your data source
                    $items = array(
                                array('title'=>'Home','tab_link'=>'http://home.com'),
                                array('title'=>'Profile','tab_link'=>'http://profile.com'),
                                array('title'=>'Messages','tab_link'=>'http://messages.com'),
                                array('title'=>'Settings','tab_link'=>'http://settings.com'),
                                array('title'=>'Profile','tab_link'=>'http://profile2.com'),
                                array('title'=>'Profile','tab_link'=>'http://profile3.com'),
                            );
                    // you have a while loop here, my array doesn't have a "fetch" method, so I use a foreach loop here        
                    foreach($items as $item) {
              //output the links with the title that matches this content's tab.
              if($item['title'] == $tab){
                            echo '<li>' . $item['title'] . ' - '. $item['tab_link'] .'</li>';
                        }
                    }
                    ?>
                </ul>
            </div>
        </div><!-- /tab-pane  -->
    <?php endforeach; ?>
    </div><!-- /tab-content  -->

<!-- END OF YOUR CODE -->