doumei1955 2015-06-09 13:52
浏览 70

Javascript代码无法使用AJAX加载PHP页面

I am trying to create a Bar Graph using jQuery flot. I have included all the required files (jQuery) in first page. Now, using AJAX, I am loading second PHP page and displaying the content in a DIV. Everything from the PHP part is working fine, but JavaScript is not working. If I include the required files and write code in same page, it is working fine. I have checked all the content of the second page is inside the body tag of the first page.

First Page:

<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 Call on First Page

<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>

Second Page

<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>
  • 写回答

1条回答 默认 最新

  • douxi8119 2015-06-11 10:29
    关注

    JavaScript inserted with innerHTML is not automatically executed. You can check that with something like

    document.getElementById('placeholder').innerHTML = '<script type="text/javascript"> alert("test"); </script>';
    

    To load HTML and JavaScript with AJAX and have it executed, use the load() method from jQuery. Replace everything from your AJAX call script after the var url = ... with

        $('#load').show();
        $('#placeholder').load(url, function() {
            $('#load').hide();
        });
    
    评论

报告相同问题?

悬赏问题

  • ¥15 求差集那个函数有问题,有无佬可以解决
  • ¥15 MATLAB动图问题
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名