[英]Ajax reloading content in Bootstrap tab
问题似乎出在几个地方。 为了开始我的图表,我试图在第三个选项卡中显示不会显示与div相关联的JavaScript。 我相信这是因为在HTML类中将它们设置为非活动状态,然后HTML类不会加载图表<div>
来显示图表。
我不确定要解决的方法,我已经研究了DOM事件和Ajax加载函数。 但是我不确定这是否是正确的答案。
我尝试解决此问题的方法是通过使选项卡处于活动状态来工作。 但是说将来我希望在所有三个选项卡上都显示图形,它仍然只加载活动选项卡。 另外,我尝试将顶点图表图形JS代码放入我的click函数中,该函数也有效。 但是如果您按1-> 2-> 3的顺序单击选项卡,则将再次加载3个图表。
所有这些都使用Apex图表,Bootstrap,PHP和JS。
<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li class="nav-item"><a class="nav-link active" href="#home">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#menu1">Menu 1</a></li>
<li class="nav-item"><a class="nav-link" href="#menu2">Menu 2</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div id="home" class="container tab-pane active"><br>
<h3>HOME</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div id="menu1" class="container tab-pane fade"><br>
<h3>Menu 1</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div id="menu2" class="container tab-pane fade"><br>
<div class="row">
<div class="col-lg-6">
<h3>Income categories</h3>
<div id="chart"></div>
</div>
<div class="col-lg-6">
<h3>Expense categories</h3>
<div id="chart2"></div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$(".nav-tabs a").click(function(){
$(this).tab('show');
});
});
</script>
</body>
</html>
<!--Loads in the bar chart for analytics-->
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<?php include($_SERVER['DOCUMENT_ROOT'] . "/Management/scripts/incomegraph.php"); ?>
这是顶点图表
var options = {
chart: {
height: 350,
type: 'bar',
},
plotOptions: {
bar: {
horizontal: true,
}
},
dataLabels: {
enabled: true
},
series: [{
data: [
400,
430,
448,
470,
540]
}],
xaxis: {
categories: [
'Management Income',
'Late Fee Income',
'Application Fee Income',
'Convience Fees',
'Laundry',],
}
}
var chart = new ApexCharts(document.querySelector("#chart"),options);
chart.render();
var options = {
chart: {
height: 350,
type: 'bar',
},
plotOptions: {
bar: {
horizontal: true,
}
},
dataLabels: {
enabled: true
},
series: [{
data: [400, 430, 448, 470, 540]
}],
xaxis: {
categories: [
'Legal fees',
'Utilities',
'Cleaning and Maintenance',
'Wages and Salaries',
'Repairs',],
}
}
var chart = new ApexCharts(document.querySelector("#chart2"),options);
chart.render();
我收到的唯一错误消息如下:
TypeError: Cannot read property 'forEach' of undefined
at i.value (apexcharts:6)
at i.value (apexcharts:6)
at apexcharts:6
at it (apexcharts:6)
at new $ (apexcharts:6)
at i.value (apexcharts:6)
at apexcharts:6
我查看了该帖子以寻求帮助,但没有一个足够的答案。 引导程序在“非活动”选项卡中 加载 AJAX内容。 重载Ajax的 内容。
这是ApexCharts中的一个错误,最近已修复并在v3.7.1中发布。请将ApexCharts更新到3.7.1,希望该问题能够解决。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.