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, plex 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 mented 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!
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, plex 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 mented 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!
Share Improve this question edited Nov 23, 2012 at 20:20 Pinny asked Nov 23, 2012 at 20:09 PinnyPinny 3062 silver badges10 bronze badges 2- Changed <script type="text/javascipt"> to <script type="text/javascript"> Sorry about the confusion – Pinny Commented Nov 23, 2012 at 20:22
- Here is the fiddle: http://jsfiddle/jnMz6 – Pinny Commented Nov 27, 2012 at 17:49
3 Answers
Reset to default 4You 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>
Change both these:
<script type="text/javascipt">
to:
<script type="text/javascript">
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>