我第一次使用AJAX来避免表单提交时的页面刷新。它工作完美,数据以HTML形式接收并放置在所需的div
中,唯一不工作的是我用来在页面上绘制饼状图的JS函数之一。
我已经在谷歌上搜索了我的问题,但发现了一些解决方案,其中响应只有JS
,但在我的情况下,响应包含HTML,包括<script>
标签,这似乎不起作用?我在下面重新创建了我的问题,看看:
index . php:
<p>Name :</p>
<input type="text" id="main-id">
<input type="submit" id="grab" value="Grab!">
<div id="my-data"></div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"> </script>
<script src="js/global.js"> </script>
<script src="js/pie.js"></script>
global.js:
$('#grab').on('click', function() {
var main-id = $('#main-id').val();
$.post('data.php', { main-id: main-id }, function(data) {
$('#my-data').html(data);
},'html');
});
var data
从data.php
获得所有的回显,包括脚本标记。
给我带来麻烦的代码片段:
<script>
$(function() {
$("#pieChart").drawPieChart([{
title: "Monday",
value: 12,
color: "#808080>"
}, {
title: "Tuesday",
value: 28,
color: "#000000"
}, {
title: "Wednesday",
value: 32,
color: "#FF0000"
}, {
title: "Thursday",
value: 8,
color: "#800000"
}, {
title: "Friday",
value: 20,
color: "#7133FF"
}]);
});
</script>
<div id="pieChart" class="chart"> </div>
JS函数.drawPieChart
在调用时用piechart填充#pieChart div
,但在我的情况下,它作为原始代码放置在页面内,#pieChart div
保持空白。
我怎么能调用.drawPieChart
后,它的页面内放置?
更新:
饼图CSS: /* Pie chart */
.chart {
width: 230px;
height: 230px;
margin-top: 20px;
margin-left: 60px;
float:left;
}
.pieTip {
position: absolute;
display:none;
z-index: 9;
float: left;
min-width: 30px;
max-width: 300px;
padding: 5px 18px 6px;
border-radius: 2px;
background: rgba(255,255,255,.97);
color: #444;
font-size: 10px;
text-shadow: 0 1px 0 #fff;
text-transform: uppercase;
text-align: center;
line-height: 1.3;
letter-spacing: .06em;
box-shadow: 0 0 3px rgba(0,0,0,0.2), 0 1px 2px rgba(0,0,0,0.5);
-webkit-transform: all .3s;
-moz-transform: all .3s;
-ms-transform: all .3s;
-o-transform: all .3s;
transform: all .3s;
pointer-events: none;
}
.pieTip:after {
position: absolute;
left: 50%;
bottom: -6px;
display:none;
content: "";
height: 0;
margin: 0 0 0 -6px;
border-right: 5px solid transparent;
border-left: 5px solid transparent;
border-top: 6px solid rgba(255,255,255,.95);
line-height: 0;
}
.chart path { cursor: pointer; }
你得到这个错误的原因是"SVG饼图与工具提示和悬停效果"库不包括在内。
请在您的主/布局视图中包含JS和CSS文件(来自codepen.io/githiro/pen/xABCi
)。你可以把它保存在记事本上,命名为"。js"answers"。css",然后把它包含到你的项目中。