InnerHtml AJAX : Javascript not working

Question

I am using an AJAX call to a PHP file from another PHP file. The called PHP creates an html content alongwith a JAvascript code :

<div id = "chart" style="height: 400px "></div>
<script src="http: //ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src = "http://code.highcharts.com/highcharts.js" > < /script>
<script>
    $(function (){ 
        var xcat = ["Build 1","Build 2"];
        var datas = [100,60]; 
        $("#chart").highcharts({
            chart: {
                type: "column"
            },
            title: {
                text: "Build Progress"
            },
            xAxis: {
                categories: xcat
            },
            yAxis: {
                title: {
                    text: "seconds"
                }
            },
            series: [{
                name: "Boot Time",
                data: datas
            }]
      });    
});
</script >

The script does not get executed after inserted using innerhtml. I read some solutions: And one of them is present but for an external js file.

http://www.hunlock.com/blogs/Howto_Dynamically_Insert_Javascript_And_CSS#quickIDX1

I need to know how to make the script run without an external js file

Help me with the same

Thanks. Patrick

Answer 1

The code you have linked will only fire when the DOM ready event fires. If you are loading this via ajax, you're right. It'll never fire because the page is already loaded and you aren't refreshing.

change

    $(function (){ //shorthand for jQuery(document).ready(function(){
        var xcat = ["Build 1","Build 2"];
        var datas = [100,60]; 
        $("#chart").highcharts({
            chart: {
                type: "column"
            },
            title: {
                text: "Build Progress"
            },
            xAxis: {
                categories: xcat
            },
            yAxis: {
                title: {
                    text: "seconds"
                }
            },
            series: [{
                name: "Boot Time",
                data: datas
            }]
        });    
    });

to

    function (){ 
        var xcat = ["Build 1","Build 2"];
        var datas = [100,60]; 
        $("#chart").highcharts({
            chart: {
                type: "column"
            },
            title: {
                text: "Build Progress"
            },
            xAxis: {
                categories: xcat
            },
            yAxis: {
                title: {
                    text: "seconds"
                }
            },
            series: [{
                name: "Boot Time",
                data: datas
            }]
        });    
    }();// the () self executes the function so you don't have to call it

Answer 2

When you use innerHTML, the script tags are not executed. If you use jquery, you can try $.html() instead of innerHTML. $.html() will automatically execute script tags.