CODEWITHSUNDEEP
htmlrendering
user1650559
user1650559

Reputation: 13

browser shows javascript code instead of rendering the page

I have a web page with Javascript, which has been displaying fine as I have been developing it. I've been developing it in Coda on my Mac; it's intended to be displayed and used in Chrome. My workplace has PCs, and I used Kompozer today to make a small change in the body of the web page. The file displayed fine beforehand, but after I save it in Kompozer, the javascript code itself was displayed. So I went back to the original file, saved it unchanged in Kompozer -- it renders fine. I make one small change -- just to a small bit of text in the body of the page -- save it and I get the same problem. Same thing happens when I use SeaMonkey on my PC.

I can't post the entire HTML file because some of the info is confidential. (And I don't want to edit it out in an HTML editor as that may further complicate the problem).

Here is a link to the HTML code from the start of the file that displays ok:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<!-- saved from url=(0079)file:///Users/ddddddd/Dropbox/CCC%20Sept%202012/CCC_schedule_09_03_10.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">


<title>CCC_TEST_Generic_2</title>



<style type="text/css">
.timeClass {
font-family:'Century Gothic';
font-weight:normal;
font-size:10pt;
}
.timeClass2 {
font-family:'Century Gothic';
font-weight:bold;
font-size:14pt;
color:red;
}
.tableX{
display: block;
font-family:'Century Gothic';
text-align: left;
table-layout:fixed;
border-collapse:collapse;
}
.tableXhidden{
display: none;
font-family:'Century Gothic';
text-align: left;
table-layout:fixed;
border-collapse:collapse;
}
.tdhidden{
display: none; }
.tdunhidden{
display: block; }
.TDBOLD{
font-weight:bold;
font-size:large;
border-collapse:collapse;
}
.redbuttonhidden
{ background-color:#FF4500;
display: none;
}
.redbuttonunhidden
{ background-color:#FF4500;
display: block;
}
.int {
font-family:'Century Gothic';
text-align: left;
border-collapse:collapse;
border-style:solid;
border-width:1px;
}
.inttd
{
padding:15px;
}
.interests_hidden{
display: none;
font-family:'Century Gothic';
text-align: left;
}
.interests_visible{
display: block;
font-family:'Century Gothic';
text-align: left;
}
.bookedhidden{font-family:'Century Gothic';
text-align: left;
table-layout:fixed;
border-collapse:collapse;
display: none;
background-color:Silver;
}
.bookedunhidden{font-family:'Century Gothic';
text-align: left;
table-layout:fixed;
border-collapse:collapse;
display: block;
background-color:#FAEBD7;
}
.templ_1 {
border:thin;
border-collapse:collapse;
font-family:'Century Gothic';
}
.admincontrols{
margin-left:150px;
}
#templateDIV{
margin-top:30px;
margin-bottom:30px;
margin-right:50px;
margin-left:50px;
}
.crossref{ display: none; }
.hidden{ display: none; }
.unhidden{ display: block; }
.ptinfo_noview{ display: none; }
.ptinfo_view{ display: block; }
.samplenoview{ display: none; }
.break { page-break-before: always; }
p.apptcardheader{
font-size:large;
text-align:left;
}
.bigbold {
font-size:large;
text-aligh:center;
}
#whyreferred{
font-family:'Century Gothic';
font-size:small;
text-align: left;
}
@media print {
body{font-family:'Century Gothic';}
.tableX{
display: block;
font-family:'Century Gothic';
text-align: left;
table-layout:fixed;
border-collapse:collapse;
}
.TDBOLD{
font-weight:bold;
font-size:large;
border-collapse:collapse;
}
p.apptcardheader{
font-size:large;
text-align:left;
}
.noprint {display:none;}
.printme {display:block;}
}
@media screen {.noscreen {display: none;}}
</style>

<script type="text/javascript">
if (localStorage.CCC=="busy")
{ window.location="CCCbusy.html";}
else {localStorage.CCC="busy"; }
var docarray=new Array();
var time_expired=0;
var CSSwritten=0;
docarray[0]="ccccccc";
docarray[1]="cccccccc";

And this is how the "rendered" page starts off in the browser window when I make a change much further down in the text (not HTML).

if (localStorage.CCC=="busy") { window.location="CCCbusy.html";} else {localStorage.CCC="busy"; } var docarray=new Array(); var time_expired=0; var CSSwritten=0; docarray[0]=

Upvotes: 1

Views: 5868

Answers (3)

Kyle Falconer
Kyle Falconer

Reputation: 8520

I had this problem and it ended up being my CSS. I had something like this:

html, body, body>* {
    display:block;
    margin:0;
    padding:0;
}

In my HTML, I had my <script> as a child under <body>, which would meet the above selector.

The fix for this was to add this in my CSS:

script {display:none;}

Upvotes: 2

AlvaHenrik
AlvaHenrik

Reputation: 414

you can try to put your javascript in this construct:

<script type="text/javascript">
<!--
.....javascript here.....
-->
</script>

Upvotes: 0

mmertel
mmertel

Reputation: 397

I'm not sure about the effect of all of your various tools on your problem, but I noticed that in the before.rtf you are missing a closing script tag. This absence would probably cause the javascript to display instead of execute.

Upvotes: 1

Related Questions