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

may be its only because of this typo: < /script> , must be: </script> — Ivan Chernykh
– Ivan Chernykh, Commented Jun 20, 2013 at 6:04

Khanh TO · Accepted Answer · 2013-06-20 06:07:39Z

1

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.

answered Jun 20, 2013 at 6:07

Khanh TO

49k13 gold badges101 silver badges117 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

James LeClair · Accepted Answer · 2013-06-20 06:18:52Z

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

edited Jun 20, 2013 at 6:18

answered Jun 20, 2013 at 6:08

James LeClair

1,30411 silver badges12 bronze badges

6 Comments

Patrick Over a year ago

I tried to use the self executing function but that doesnt seem to still do the trick.. When i run the called PHP all by itself it loads perfectly using my approach, but after using the self executing one even that seems to fail

James LeClair Over a year ago

did you fix the typo @cherniv pointed out also? < /script> should be </script>

James LeClair Over a year ago

@Patrick can I assume you are using $.ajax? if so, are you passing a dataType: 'html' parameter? According to jquery documentation " "html": Returns HTML as plain text; included script tags are evaluated when inserted in the DOM. " more here

Patrick Over a year ago

I am using the XmlhttpRequest method as explained below: w3schools.com/php/php_ajax_database.asp not proper ajax. I am not sure how to do it using AJAX and JQUERY. :(

James LeClair Over a year ago

@Patrick I have a feeling its the content header thats not telling the browser to execute the script (although i still stand by the self executing function in my original answer as part of the fix to the overall problem) give jquery ajax a try when you get a chance. It'll make your life easier if you are already using the library for other things. http://api.jquery.com/jQuery.ajax/

|

Collectives™ on Stack Overflow

InnerHtml AJAX : Javascript not working

2 Answers 2

Comments

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related