Javascript functions do not work in IE

Question

I am using a function in conjunction with FusionCharts. I am using a function that gets rid of the charts if no data can be found for it. The function is from FusionCharts.

It runs fine with Firefox and Chrome but screws the whole Drupal page in IE. Can you look at the code and see if I improperly wrote it. Thanks.

<script type='text/javascript'><!--
    FusionCharts('Yield_Tab_3a_Growth_of_100000').addEventListener (
        ['NoDataToDisplay', 'DataXMLInvalid'],
        function() {
            FusionCharts('Yield_Tab_3a_Growth_of_100000').dispose(); 
        }
    );
</script>

It's difficult to debug your JavaScript code if you post it as a PHP string. Please post and format your code properly. First guess: You are using an IE version which does not support `addEventListener`. And usually, the first argument to `addEventListener` should be as string only (maybe that changed in a newer DOM spec). — Felix Kling, Jan 03 '13 at 15:05
While editing the post, please add also the IE version you've tested. — Teemu, Jan 03 '13 at 15:06
You seem to be missing a `//-->` before your `` tag. **Edit**: it's funny how quickly people posted this as an answer, after this comment :P — Cerbrus, Jan 03 '13 at 15:08

score 1 · Answer 1 · edited May 23 '17 at 12:04

1

Remove the <!--. You should not be using these comment tags anymore. https://stackoverflow.com/a/808850/897559

edited May 23 '17 at 12:04

Community

1
1

answered Jan 03 '13 at 15:13

Travis Watson

1,729
1
18
25

score 1 · Answer 2 · answered Jan 03 '13 at 15:23

As others have mentioned, the primary issue is that you're missing the end to your comment, but the more modern way to prevent JavaScript from interfering with your HTML markup is to use a CDATA block:

<script type='text/javascript'>
   //<![CDATA[
    FusionCharts('Yield_Tab_3a_Growth_of_100000').addEventListener (
        ['NoDataToDisplay', 'DataXMLInvalid'],
        function() {
            FusionCharts('Yield_Tab_3a_Growth_of_100000').dispose(); 
        }
    );
   //]]>
</script>

Though that's not really necessary in this case either because you're not using any < or & symbols in your code.

Only necessary if you intend for your application to be parsed as XML. I don't believe this is recommended for an HTML5 Doctype since it is not valid XML to begin with. However, if you're still using an XHTML Doctype, and you're ensuring XML validity, then definitely use this CDATA tagging. — Travis Watson, Jan 03 '13 at 16:08

score 0 · Answer 3 · answered Jan 03 '13 at 15:09

I see a missing comment tag that you started at the beginning. IE might be a little more sensitive to that

<script type='text/javascript'><!--
    FusionCharts('Yield_Tab_3a_Growth_of_100000').addEventListener (
        ['NoDataToDisplay', 'DataXMLInvalid'],
        function() {
            FusionCharts('Yield_Tab_3a_Growth_of_100000').dispose(); 
        }
    );
    //-->
</script>

The line I added is right above

Cerbrus · Answer 4 · 2013-01-03T15:24:41.940

You seem to be missing a //--> before your </script> tag:

<script type='text/javascript'><!--
    FusionCharts('Yield_Tab_3a_Growth_of_100000').addEventListener (
        ['NoDataToDisplay', 'DataXMLInvalid'],
        function() {
            FusionCharts('Yield_Tab_3a_Growth_of_100000').dispose(); 
        }
    );
    //-->
</script>

Without that, you have a unclosed HTML comment. That could mess up your page big time.

--> : End of the HTML comment
// : Comment out the --> in your JavaScript, to prevent syntax errors.

However, nowadays you can just remove the comment altogether:

<script type='text/javascript'>
    FusionCharts('Yield_Tab_3a_Growth_of_100000').addEventListener (
        ['NoDataToDisplay', 'DataXMLInvalid'],
        function() {
            FusionCharts('Yield_Tab_3a_Growth_of_100000').dispose(); 
        }
    );
</script>

@YassineHoussni: Bolded the text where I said exactly that, already. — Cerbrus, Jan 03 '13 at 15:25

Javascript functions do not work in IE

4 Answers4