Мне удалось сгенерировать динамическое содержимое таблицы для каждой вкладки в Bootstrap 3, но когда я переключился на Bootstrap 4, по какой-то причине содержимое вкладок не меняется, когда я переключаю вкладки. Содержание первой вкладки остается одинаковым на всех вкладках.
Основная причина, по которой это озадачивает меня, заключается в том, что когда я смотрю на элементы загруженной страницы, код загружается правильно. Он просто не нацелен на идентификатор и не загружает новые данные, когда я переключаю теги. Я попытался установить «active» на разных вкладках при начальной загрузке, а также пробовал разные «fade-in» и «fade-show», но безрезультатно.
Любая помощь будет оценена
//count is only used to set the initial tab to active.
$count = 0;
//$sched_array is an array with a time array (description, length) and ID saved inside a date array.
foreach($sched_array as $date => $time){
$ID = $time['ID'];
if($count == 0){
$tab_menu .= '
<li class = "nav-item"><a class = "nav-link active" data-toggle="tab" href="#'. htmlstr($ID) . '"> '. $date .' </a></li>
';
$tab_content .= '<div id = "'.$ID.'" class = "tab-pane active">
';
}
else{
$tab_menu .= '
<li class = "nav-item">
<a class = "nav-link" data-toggle="tab" href="#'.$ID. '"> ' . $date . '</a>
</li>
';
$tab_content .= '<div id = "'.$ID.'" class = "tab-pane fade" >
';
}
$time_array = array_shift($time);
//load the actual content for the table
$tab_content .='
<table class = "table table-dark table-striped">
<thead class = "thead-dark">
<tr>
<th scope = "col"> Start Time </th>
<th scope = "col"> Session </th>
<th scope = "col"> Length (minutes) </th>
</tr>
</thead>
<tbody>
';
foreach($time as $index => $key){
$desc = $key['description'];
$leng = $key['length'];
$tab_content .= '
<tr>
<td> '.$index.' </td>
<td>'.$desc.'</td>
<td>'.$leng.'</td>
</tr>
';
}
$tab_content .= '</tbody> </table> </div>';
$count++;
}
HTML-код, в который загружен php, показан ниже:
<html>
<body>
<section id="main">
<input type = "hidden" name="id" value="<?php echo sanitize_id($_GET['id']); ?>">
<input type = "hidden" name="action">
<input type = "hidden" name="sequence">
<ul class="nav nav-tabs role = "tablist">
<?php echo $tab_menu?>
</ul>
<div class = "tab-content">
<?php echo $tab_content?>
</div>
</section>
</body>
</html>