Dynamic Bootstrap Tabs using PHP/MySQL - php

Question

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 1

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 -->

Answer 2

This help me a lot. I have two static tabs for content creation which drive the dynamic tabs. It is definitely still a little rough but at least the concept is working.
<ul class="nav nav-tabs">
<li class="active">Clusters</li>
<li>Activities</li>
<?php
$sql = "<insert query here>";
$stmt = sqlsrv_query( $conn, $sql );
if( $stmt === false) {
die( print_r( sqlsrv_errors(), true) );
}
while( $rowtab = sqlsrv_fetch_array( $stmt, SQLSRV_FETCH_ASSOC) ) {
$tab_class = ($rowtab['tab_title']==$current_tab) ? 'active' : '' ;
$nospaces = str_replace(' ', '', $rowtab['tab_title']);
echo '<li class="'.$tab_class.'"><a href="#' . urlencode($nospaces) . '" data-toggle="tab">' .
$rowtab['tab_title'] . '</a></li>';
}
?>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
Tab1 Content
</div>
<div class="tab-pane" id="tab2">
Tab2 Content
</div>
<?php
$sql = "<insert query here>";
$stmt = sqlsrv_query( $conn, $sql );
if( $stmt === false) {
die( print_r( sqlsrv_errors(), true) );
}
while( $rowtab = sqlsrv_fetch_array( $stmt, SQLSRV_FETCH_ASSOC) ) {
$tab = $rowtab['tab_title'];
$nospaces = str_replace(' ', '', $rowtab['tab_title']);
$content_class = ($tab==$current_tab) ? 'active' : '' ;
echo '<div class="tab-pane'. $content_class.'" id="'.$nospaces.'">';
echo 'You are looking at the '.$tab.' tab. Dynamic content will go here.';
echo '</div><!-- /.tab-pane -->';
}
?>
</div>

Answer 3

foreach ($files as $file):
$filename = preg_replace("/\.html$/i", "", $file);
$title = preg_replace("/\-/i", " ", $filename);
$documentation = 'usage/'.$type.'/'.$file;
$tab1 = 'usage/'.$type.'/'.$file;
echo '<div class="sg-markup sg-section">';
echo '<div class="sg-display">';
echo '<h2 class="sg-h2"><a id="sg-'.$filename.'" class="sg-anchor">'.$title.'</a></h2>';
//TAb Set up
echo '<div class="row"><div class="col-md-12">';
echo '<ul class="nav nav-tabs" role="tablist">';
echo '<li role="presentation" class="active">Visual</li>';
echo '<li role="presentation">Rules</li>';
echo '</ul>';
echo '</div>';
echo '</div>';
//Visual Tab Content
echo '<div class="row"><div class="col-md-12">';
echo '<div class="tab-content">';
echo '<div role="tabpanel" class="tab-pane active" id="Visual">';
echo '<h3 class="sg-h3">Visual</h3>';
include('markup/'.$type.'/'.$file);
//View Source
echo '<div class="sg-markup-controls"><a class="btn btn-primary sg-btn sg-btn--source" href="#">View Source</a> <a class="sg-btn--top" href="#top">Back to Top</a> </div>';
echo '<div class="sg-source sg-animated">';
echo '<a class="btn btn-default sg-btn sg-btn--select" href="#">Copy Source</a>';
echo '<pre class="prettyprint linenums"><code>';
echo htmlspecialchars(file_get_contents('markup/'.$type.'/'.$file));
echo '</code></pre>';
echo '</div><!--/.sg-source-->';
echo '</div>';
//Documentation Tab Content
if (file_exists($documentation)) {
echo '<div role="tabpanel" class="tab-pane" id="Rules">';
echo '<h3 class="sg-h3">Rules</h3>';
include($documentation);
//View Source
echo '<a class="sg-btn--top" href="#top">Back to Top</a>';
echo '</div>';
}
//Documentation Tab1 Content
echo '<div role="tabpanel" class="tab-pane" id="Tab1">';
echo '<h3 class="sg-h3">Tab1</h3>';
include($tab1);
echo '<a class="sg-btn--top" href="#top">Back to Top</a>';
echo '</div>';
//Documentation Tab2 Content
echo '<div role="tabpanel" class="tab-pane" id="Tab2">';
echo '<h3 class="sg-h3">Tab2</h3>';
// include($tab2);
echo '<a class="sg-btn--top" href="#top">Back to Top</a>';
echo '</div>';
echo '</div>'; //End Tab Content
echo '</div>'; //End Column
echo '</div>'; //End Row
//echo '<div class="row"><div class="col-md-12">';
//echo '<h3 class="sg-h3">Example</h3>';
//include('markup/'.$type.'/'.$file);
//echo '</div>';
// if (file_exists($documentation)) {
// echo '<div class="col-md-12"><div class="well sg-doc">';
// echo '<h3 class="sg-h3">Rules</h3>';
// include($documentation);
// echo '</div></div></div>';
// }
echo '</div><!--/.sg-display-->';
//echo '</div><!--/.colmd10-->';
echo '</div><!--/.sg-section-->';
endforeach;
}