PHP generated javascript not executing

Question

Following dropdown:

<select id='dropdown' name='dropdown' onchange='showChart(this.value)'>
<option value="1">Foo</value>
<option value="2">Bar</value>
</select>

Calls this javascript function onchange:

<script type="text/javascript">
        function showChart(str1) {
            if (str1 == "") {
                document.getElementById("chartContainer").innerHTML = "";
                return;
            }
            if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp = new XMLHttpRequest();
            }
            else {// code for IE6, IE5
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange = function () {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    document.getElementById("chartContainer").innerHTML = xmlhttp.responseText;
                }
            };
            xmlhttp.open("GET", "../ajaxpage/chart.php?charttype=" + str1);
            xmlhttp.send();
        }
    </script>

chart.php?charttype looks like this:

<?php
$charttype = $_GET['charttype'];

if ($charttype == "1") {
    echo "<p>test1</p>";
    echo "<script type='text/javascript'>
        alert('test1');
    </script>";
} else {
    echo "<p>test2</p>";
    echo "<script type='text/javascript'>
        $(document).ready(function() {
          alert('test2');
        });
    </script>";
}

?>

Everything seems to work. The test1 and test2 in paragraph tags are rendered correctly in the graphContainer div onchange of the dropdown. However, the javascript is not executing. How come generated javascript does not execute, and how do I fix this?

Thanks.

EDIT

Here is the extremely foul (but working) workaround:

<img src="../images/loaded.gif" alt="" 
     onload="Code To Execute Here;this.parentNode.removeChild(this);" />

Nope, firebug doesn't seem to give me any errors. The script is also correctly rendered into the HTML when I check the source. — Matthias
– Matthias, Commented Apr 8, 2012 at 12:50
Does http://....../ajaxpage/chart.php?charttype=1 actually return valid data? — mplungjan
– mplungjan, Commented Apr 8, 2012 at 12:51
Yup, I can do an echo of the $charttype on the page with PHP and that gives me the correctly passed value. — Matthias
– Matthias, Commented Apr 8, 2012 at 12:53
possible duplicate of Can scripts be inserted with innerHTML? — epascarello
– epascarello, Commented Apr 8, 2012 at 12:55
I would avoid at-all-costs having one programming language write another language, or mixes languages together in the same spot. It might seem fine today... but you're going to come back to this one day, or maybe your friend, and it's going to feel like a claw hammer right to the teeth when you need to fix it. — Incognito
– Incognito, Commented Apr 8, 2012 at 13:01

epascarello · Accepted Answer · 2012-04-08 12:53:15Z

4

JavaScript is not evaluated with innerHTML.

answered Apr 8, 2012 at 12:53

epascarello

208k20 gold badges206 silver badges246 bronze badges

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

12 Comments

Jeffrey Sweeney Over a year ago

Yep, and this is one of the reasons that you shouldn't use innerHTML to "load" pages.

Matthias Over a year ago

Any workarounds to make it work? I'm not that very familiar with html/js, let alone ajax.

Jeffrey Sweeney Over a year ago

@Matthias Perhaps you could use an iframe. If the file you're loading is just a script, you could try dumping the content into a script tag and then appending it to the document (although there are security risks to doing this).

Matthias Over a year ago

Unfortunately, it's not just a script. Depending on the value of the dropdown, I have to generate a graph (with Highcharts) so I have to combine PHP and Javascript in order to generate the correct graph depending on data from a database. Just simplified things a bit to ask my question.

epascarello Over a year ago

USE A LIBRARY! JQuery, MooTools, Etc all do this for you!

|

Collectives™ on Stack Overflow

PHP generated javascript not executing

1 Answer 1

12 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

12 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related