Pinny
Pinny

Reputation: 306

IE does not read <script> tag, but after refresh works fine

I have a weird bug that is present only in IE (7/8/9/9CV). FF and Chrome do not have this issue.

I have a pretty big, complex page. In the bottom of the page I have two pieces of JavaScript code right one after another. The first one has no problems, but the second one for some reason is being displayed as a text when I load the page first time. If I just refresh the page without doing anything else - everything works and looks just fine.

Two pieces of JS being generated on a server from two different pagelets so I cannot put them together into one script tag. The first piece of JavaScript code is nothing more but a call to the same function couple of times with different parameters, and the second script is just a declaration of a JSON like object that is being consumed by another function that is defined earlier on the page.

So the page code looks something like this:

<!DOCTYPE html>
<html>
<head>
  ...
<title>...</title>
</head>
<body>
...
<script type="text/javascript">
//Some javascript that executes perfectly fine every time and is nothing more but just couple of calls to some function
someFunction("param1");
someFunction("param2");
someFunction("param3");
</script>
<script type="text/javascript">
var myObject = {"success":[{"header":"Form successfully submitted","messages":["Some message 1"]}]};
</script>
</body>
</html>

So when a form submitting happens I take this object and use it to display a message on the page. But instead, when user submits the form and it opens the page for the first time, I see this in the bottom of the page:

var myObject= {"success":[{"header":"Form successfully submitted","messages":["Some message 1"]}]};

But when I refresh the page - I do not see that code, but instead I see the message being displayed with values from this object.

When I open the "developer tools" and navigate to the HTML tab, I see that my tag for the second JS piece is shown as commented out!

<!-- sctipt ... -->

But if I refresh the page - it works fine, and in HTML tab of the developer tools it actually shown as a script node that I can expand and see the Javascript code.

Does anyone know what is going on here?!?! This issue has been bugging me for couple of days now!

Upvotes: 2

Views: 4653

Answers (3)

Pinny
Pinny

Reputation: 306

Well, I found an answer to this problem. Well, more of a work around I guess, as this is not something I expected but it works.

Basically, if you put anything between the two script elements - IE wokrs fine! So what I did was - I put br tag in between and it now works fine. I have no idea why. Perhaps some weird bug in IE rendering engine.

The end result looks like this:

<script type="text/javascript">
//Some javascript that executes perfectly fine every time and is nothing more but just couple of calls to some function
someFunction("param1");
someFunction("param2");
someFunction("param3");
</script>
<br>
<script type="text/javascript">
var myObject = {"success":[{"header":"Form successfully submitted","messages":["Some message 1"]}]};
</script>

Upvotes: 1

Denys S&#233;guret
Denys S&#233;guret

Reputation: 382274

You should replace

<script type="text/javascipt">

with

<script type="text/javascript">

EDIT :

HTML isn't XHTML. Don't wrap your scripts inside CDATA. Your script elements should be simply like this :

<script type="text/javascript">
  var t0_date = new Date();
  ...
</script>

Upvotes: 4

Guffa
Guffa

Reputation: 700572

Change both these:

<script type="text/javascipt">

to:

<script type="text/javascript">

Upvotes: 1

Related Questions