Javascript code is not working on loaded PHP page using AJAX

Question

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>

Answer 1

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();
    });