使用 AJAX 在动态引导选项卡中加载动态内容
[英]Use AJAX to load dynamic content in dynamic bootstrap tabs
问题描述
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.我基本上需要使用 jquery（来自引导程序文档）获取当前引导程序 4 选项卡的名称/ID，并将其传递到 PHP 变量中，然后在 MySQL WHERE 子句中使用以确定要为该选项卡显示哪些数据。
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.但是当我在我的 php 页面顶部获取我发布的变量时，我无法在我的 WHERE 子句中进一步使用它。 I am getting the error 'undefined variable'.我收到错误“未定义的变量”。 Any help?有什么帮助吗？
Below is my php page code -下面是我的 php 页面代码 -
<?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>
1 个解决方案
解决方案1
0 2020-01-24 10:04:44
Try尝试
<script>
$(document).ready(function(){
$(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function (e)
{
var x = $(e.target).text();
console.log(x);
$.ajax({
url: 'contacts_1.php',
type: 'post',
data:{'activeTab' : x},
datatype: 'html',
success: function (rsp, status, jqXHR)
{
$('.tab-content').html(rsp);
}
});
});
});
</script>
To capture events on elements that are created AFTER declaring your event listeners - you should bind to a parent element or element higher in the hierarchy.要捕获在声明事件侦听器后创建的元素上的事件 - 您应该绑定到层次结构中更高的父元素或元素。
PHP Code:
<?php
if( isset($_POST['activeTab']))
{
$currenttab = $_POST['activeTab'];
?>
<?php
$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'];
?>
<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'>
<h5 class='card-title'><?php echo $name ?></h5>
<p class='card-text'><i class='fa fa-fw fa-user'></i><?php echo $emprole ?></p>
<hr>
<p class='card-text'><i class='fa fa-fw fa-phone'></i><?php echo $empext ?></p>
</div>
</div>
</div>
<?php
}
?>
<?php
}
?>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.