I have tried so hard to do this but can't get it to work. I basically need to get the name/id of the current bootstrap 4 tab using jquery (from bootstrap docs) and pass it into a PHP variable to then use in MySQL WHERE clause to determine what data to show for that tab.
This is my code so far:
<script>
$(document).ready(function(){
$('.nav-tabs a').on('click', function (e) {
e.preventDefault()
$(this).tab('show')
})
$('a[data-toggle="tab"]').on('shown.bs.tab', function(e)
{
var x = $(e.target).text();
console.log(x);
$(".act span").text(x);
$.ajax({
type: 'post',
url:'contacts_1.php',
data:{'activeTab' : x},
success:function(result){
$('body').html(result);
}
});
});
});
</script>
Then at the top of the page, I am trying to access the variable like so -
<?php
if( isset($_POST['activeTab']))
{
$currenttab = $_POST['activeTab'];
echo $currenttab;
}
?>
** Update - I have now got the tabs to work (updated my code) (although I can't get the tab to stay 'active' - that's another problem). But when I get my posted variable at the top of my php page, I cannot use it further down my page in my WHERE clause. I am getting the error 'undefined variable'. Any help?
Below is my php page code -
<?php
if( isset($_POST['activeTab'])){
$currenttab = $_POST['activeTab'];
echo $currenttab;
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
<title></title>
</head>
<body>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
*some other html here just displaying a photo*
<ul class='nav nav-tabs'>
<?php
include('connect.php');
$tabs = "SELECT DISTINCT tab FROM table";
$result = oci_parse($conn, $tabs);
oci_execute($result);
while (($row = oci_fetch_assoc($result)) != false) {
$area = $row['TAB'];
$output = '';
$output03= '';
echo " <li class='nav-item'>
<a class='nav-link' id='home-tab' data-toggle='tab' href='#" .$area. "' role='tab' aria-controls='home' aria-selected='true'>$area</a>
</li>";
$output .= "<div class='tab-pane fade show active' id='" .$area. "' role='tabpanel' aria-labelledby='home-tab'>";
$output03 .= '</div>';
}
?>
</ul>
<div class='tab-content mt-4'>
<div class='row'>
<?php
echo $output;
$query = "SELECT field1, field2, ...
FROM table1, table2,....
WHERE ... = ... AND
TAB = '$currenttab'";
$stid = oci_parse($conn, $query);
oci_execute($stid);
while (($row = oci_fetch_assoc($stid)) != false) {
$name = $row['EMPNAME'];
$emprole = $row['ROLE'];
$empext = $row['EXTENSION'];
echo "<br>
<div class='col-md-4'>
<div class='card' style='width: 18rem;'>
<img class='card-img-top' src='img_avatar.png' alt='Card image cap'>
<div class='card-body text-centered'>
<a data-toggle='collapse' href='#moreinfo1' role='button' aria-expanded='false' aria-controls='collapseExample'>
<h5 class='card-title'>$name</h5>
</a>
<p class='card-text'><i class='fa fa-fw fa-user'></i>$emprole</p>
<hr>
<p class='card-text'><i class='fa fa-fw fa-phone'></i>$empext</p>
</div>
</div>
</div> ";
}
echo $output03;
?>
</div>
<script>
$(document).ready(function(){
$('.nav-tabs a').on('click', function (e) {
e.preventDefault()
$(this).tab('show')
})
$('a[data-toggle="tab"]').on('shown.bs.tab', function(e)
{
var x = $(e.target).text();
console.log(x);
$(".act span").text(x);
$.ajax({
type: 'post',
url:'contacts_1.php',
data:{'activeTab' : x},
success:function(result){
$('body').html(result);
}
});
});
});
</script>
</body>
</html>
