Javascript代码不能在使用AJAX加载的PHP页面上工作
Javascript code is not working on loaded PHP page using AJAX
我正在尝试使用jQuery创建一个条形图。我在第一页中包含了所有必需的文件(jQuery)。现在,使用AJAX,我正在加载第二个PHP页面并在DIV中显示内容。PHP部分的所有内容都工作正常,但JavaScript不起作用。如果我包含所需的文件并在同一页面中编写代码,则可以正常工作。我检查了第二页的所有内容都在第一页的body标签内。
<标题>第一页:<script src="js/jquery-1.8.3.js" type='text/javascript'></script>
<script type="text/javascript" src="js/flot/jquery.flot.js"></script>
<script type="text/javascript" src="js/flot/jquery.flot.symbol.js"></script>
<script type="text/javascript" src="js/flot/jquery.flot.axislabels.js"></script>
<div id="placeholder" style="width:100%;">
Ajax对第一页的调用
<script type="text/javascript">
var action = document.getElementById('action').value;
var from_date = document.form1.from_date.value;
var to_date = document.form1.to_date.value;
var marketname = document.form1.marketname.value;
var url="lib/reports/SaleItemSales.php?srchtxt="+srchtxt+"&from_date="+from_date+"&to_date="+to_date+"&view="+view+"&page="+page+"&iip="+iip;
xmlhttp.open("POST",url,true);
xmlhttp.send();
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==0 || xmlhttp.readyState==1 || xmlhttp.readyState==2 || xmlhttp.readyState==3)
{
document.getElementById('load').style.display="block";
}
if(xmlhttp.readyState==4 && xmlhttp.status==200)
{
var resp=xmlhttp.responseText;
document.getElementById('placeholder').innerHTML=resp;
document.getElementById('load').style.display="none";
}
}
</script>
<标题>第二页<div style="width:80%;height:500px;text-align:center;margin:10px">
<div id="flot-placeholder" style="width:100%;height:100%;"></div>
</div>
<script language="javascript" type="text/javascript">
var data = [[-0.2, 11],[0.8, 15],[1.8, 25],[2.8, 24],[3.8, 13],[4.8, 18]];
var data2 = [[0.2, 14],[1.2, 17],[2.2, 40],[3.2, 14],[4.2, 19],[5.2, 23]];
var data1 = [[0, 14],[1, 17],[2, 40],[3, 14],[4, 19],[5, 23],[6, 23],[7, 23],[8, 23],[9, 23],[10, 23],[11, 23],[12, 23],[13, 23],[14, 23],[15, 23],[16, 23],[17, 23],[18, 23],[19, 23],[20, 23],[21, 23],[22, 23],[23, 23],[24, 23],[25, 23]];
var dataset = [{ label: "Number of Orders", data: data, color: "#AA0000" },{ label: "Number of Items", data: data1, color: "#00AA00" },{ label: "Amount", data: data2, color: "#0000AA" }];
var ticks = [[0, "19 Jan 2015"], [1, "20 Jan 2015"], [2, "21 Jan 2015"], [3, "22 Jan 2015"],[4, "23 Jan 2015"], [5, "24 Jan 2015"], [6, "19 Jan 2015"],[7, "19 Jan 2015"],[8, "19 Jan 2015"],[9, "19 Jan 2015"],[10, "19 Jan 2015"],[11, "19 Jan 2015"],[12, "19 Jan 2015"],[13, "19 Jan 2015"],[14, "19 Jan 2015"],[15, "19 Jan 2015"],[16, "19 Jan 2015"],[17, "19 Jan 2015"],[18, "19 Jan 2015"],[19, "19 Jan 2015"],[20, "19 Jan 2015"],[21, "19 Jan 2015"],[22, "19 Jan 2015"],[23, "19 Jan 2015"],[24, "19 Jan 2015"],[25, "19 Jan 2015"]];
var options = {
series: {
bars: {show: true},
},
bars: {
align: "center",
barWidth: 0.2
},
xaxis: {
axisLabel: "Date",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 10,
ticks: ticks,
tickLength:0,
},
yaxis: {
axisLabel: "No of Orders, No of Items and Amount",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 3,
tickFormatter: function (v, axis) {
return v + "";
}
},
legend: {
noColumns: 0,
labelBoxBorderColor: "#000000",
position: "nw"
},
grid: {
hoverable: true,
borderWidth: 1,
backgroundColor: { colors: ["#ffffff", "#EDF5FF"] }
}
};
$(document).ready(function (){
$.plot($("#flot-placeholder"), dataset, options);
$("#flot-placeholder").UseTooltip();
});
function gd(year, month, day) {
return new Date(year, month, day).getTime();
}
var previousPoint = null, previousLabel = null;
$.fn.UseTooltip = function () {
$(this).bind("plothover", function (event, pos, item) {
if (item) {
if ((previousLabel != item.series.label) || (previousPoint != item.dataIndex)) {
previousPoint = item.dataIndex;
previousLabel = item.series.label;
$("#tooltip").remove();
var x = item.datapoint[0];
var y = item.datapoint[1];
var color = item.series.color;
//console.log(item.series.xaxis.ticks[x].label);
showTooltip(item.pageX, item.pageY, color,
"<strong>" + item.series.label + "</strong><br>" + item.series.xaxis.ticks[x].label + " : <strong>" + y + "</strong> °C");
}
} else {
$("#tooltip").remove();
previousPoint = null;
}
});
};
function showTooltip(x, y, color, contents) {
$('<div id="tooltip">' + contents + '</div>').css({
position: 'absolute',
display: 'none',
top: y - 40,
left: x - 120,
border: '2px solid ' + color,
padding: '3px',
'font-size': '9px',
'border-radius': '5px',
'background-color': '#fff',
'font-family': 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
opacity: 0.9
}).appendTo("body").fadeIn(200);
}
</script>
标题>标题>
插入innerHTML
的JavaScript不会自动执行。你可以用
document.getElementById('placeholder').innerHTML = '<script type="text/javascript"> alert("test"); </script>';
要用AJAX加载HTML和JavaScript并执行,请使用jQuery中的load()方法。用
替换AJAX调用脚本中var url = ...
之后的所有内容 $('#load').show();
$('#placeholder').load(url, function() {
$('#load').hide();
});
相关文章:
- PHP Javascript显示/隐藏按钮不工作
- 如何使MailHandler.php在Wordpress中工作
- 如何检查这个代码点火器php函数是否工作,该函数是否在ajax url中使用
- 如何在php中创建一个函数,该函数与文本区域一起工作,通过输入类似[color:red]的内容来打印具有等效颜色的文本
- 如何使Jquery编码的动态下拉菜单与PHP GET变量协调工作
- Foreach无法在php和Jquery中工作
- document.title函数可以't设置它与php一起工作
- 递增 PHP 变量在 JSCRIPT 文档工作方面
- 类似按钮增量计数器不工作.PHP,AJAX,MySQL,javascript
- PHP:运行后变量不工作“;如果“;命令
- 为什么带有php-var的javascript代码不是't工作
- 无法使autocompletion与bootstrap和php代码点火器一起工作
- onClick按钮不工作javascript/php/jquery mobile
- Ajax调用PHP失败,ASP正常工作.NET
- 我怎么能与评级星星和PHP工作
- 按钮不能在Chrome (Jquery/Javascript/css/php)工作
- 我如何使这个AJAX/PHP工作
- URL重定向基于输入,但如果输入URL不存在,则不重定向无法使PHP工作
- 用javascript生成表单元素并将它们发布到php工作在EI而不是在Chrome和Firefox
- 将Javascript插入PHP工作表