Stysheet not applying to code generated on onload event. 2

SuperSal · Jul 13, 2007

Hi everyone, bit of a strange problem i have come across. I am creating a website where the html is auto generated by a number of javascript functions. The functions are called in the body onload event and the css is specified in an external css file. The problem is that when the page loads the html is generated on the onload event therefore the stylesheet is not being applied to the html. Is there anyway to get the stylesheet to be applied for the html that is generated in the javascript function?

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript" src="../Scripts/menuitems.js"></SCRIPT>
<LINK rel="stylesheet" type="text/css" href="../Stylesheets/Forms.css">
</HEAD>

<BODY onLoad="renderNetwork();">
<script>

var dstr=""

function renderNetwork()
{
//function code here to generate html
}

</script>
</BODY>
</HTML>

Thanks
Sally

pixelz · Jul 13, 2007

Hi Sal,

Could you post a link to a live version of your page, if you have one, so we can see the problem in action? Having a difficult time visualising it.

Also, you may not need to use the onload method for running your script. It could possibly be done by the following:

Code:

<BODY>
 <script>
   var dstr=""

   function renderNetwork() {
     //function code here to generate html
   }

   renderNetwork();
</script>
</BODY>

I think that would probably work... but it would be good to see what you get in-browser when you run your page tho...

cheers,

pix

feherke · Jul 13, 2007

Hi

Sally said:
The problem is that when the page loads the html is generated on the onload event therefore the stylesheet is not being applied to the html.

Why do you think so ? In the later time I generated HTML from JavaScript in every possible moment and the style was always applied.

Could you please post some relevant parts of the renderNetwork() function and the Forms.css file ? Also give us details about what browser you use and are you loading the page through a web server or opening it directly from the file system.

Feherke.

http://rootshell.be/~feherke/

SuperSal · Jul 13, 2007

Hi pix, thanks unfortunately calling the function doesnt work either. I havent got any live code unfortunately but basically its just a form. Here is the full code so that you can see whats going on better.

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript" src="../Scripts/menuitems.js"></SCRIPT>
<LINK rel="stylesheet" type="text/css" href="../Stylesheets/Forms.css" >
</HEAD>
<BODY onLoad="renderNetwork();">
<script>
var dstr=""

function renderNetwork()
{
dstr += '<table width="1242" height="712" border="1"><tr><td width="1384" align="left" valign="top"><p> </p><table width="802" height="404"><tr><td height="38"></td><td height="38" colspan="2">';
dstr += '<h1>You are in > Configuration > <span class="style1">Network</span></h1></td></tr><tr><td width="61" height="34"> </td><td width="187" height="34">IP Address</td><td width="538">';
dstr += '<input name='+IPAddress[0]+' onChange='+IPAddress[1]+' type='+IPAddress[2]+' id='+IPAddress[0]+' size='+IPAddress[3]+' maxlength='+IPAddress[4]+' class='+IPAddress[5]+' /></td></tr><tr><td height="34"> </td>';
dstr += '<td height="34">Subnet</td><td><label>';
dstr += '<input name='+Subnet[0]+' onChange='+Subnet[1]+' type='+Subnet[2]+' id='+Subnet[0]+' value='+Subnet[6]+' size='+Subnet[3]+' maxlength='+Subnet[4]+' class='+Subnet[5]+'/></label></td>';
dstr += '</tr><tr><td height="34" colspan="2"> </td><td><label></label></td></tr><tr><td height="34"> </td><td height="34">Primary DNS</td><td><label>';
dstr += '<input name='+PrimaryDNS[0]+' onChange='+PrimaryDNS[1]+' type='+PrimaryDNS[2]+' id='+PrimaryDNS[0]+' size='+PrimaryDNS[3]+' maxlength='+PrimaryDNS[4]+' class='+PrimaryDNS[5]+'/></label></td></tr><tr><td height="34">';dstr += ' </td><td height="34">Secondary DNS</td><td>';
dstr += '<input name='+SecDNS[0]+' onChange='+SecDNS[1]+' type='+SecDNS[2]+' id='+SecDNS[0]+' size='+SecDNS[3]+' maxlength='+SecDNS[4]+' class='+SecDNS[5]+'/></td></tr><tr><td height="34" colspan="2"> </td>';
dstr += '<td> </td></tr><tr><td height="34"> </td><td height="34">DHCP IP</td><td><label>';
dstr += '<input name='+DHCPIP[0]+' type='+DHCPIP[2]+' id='+DHCPIP[0]+' value='+DHCPIP[6]+' size='+DHCPIP[3]+' maxlength='+DHCPIP[4]+' '+DHCPIP[7]+'></label></td></tr>';
dstr += '<tr><td height="34"> </td><td height="34">DHCP Subnet</td><td><label>';
dstr += '<input name='+DHCPSubnet[0]+' type='+DHCPSubnet[2]+' id='+DHCPSubnet[0]+' value='+DHCPSubnet[6]+' size='+DHCPSubnet[3]+' maxlength='+DHCPSubnet[4]+' '+DHCPSubnet[5]+'></label></td></tr>';
dstr += '<tr><td height="34"> </td><td height="34">DHCP Gateway</td><td><label>';
dstr += '<input name='+DHCPGateway[0]+' type='+DHCPGateway[2]+' id='+DHCPGateway[0]+' value='+DHCPGateway[6]+' size='+DHCPGateway[3]+' maxlength='+DHCPGateway[4]+' '+DHCPGateway[5]+'></label></td></tr>';
dstr += '<tr><td height="34"> </td><td height="34">DHCP Name</td><td><label>';
dstr += '<input name='+DHCPName[0]+' type='+DHCPName[2]+' id='+DHCPName[0]+' value='+DHCPName[6]+' size='+DHCPName[3]+' maxlength='+DHCPName[4]+' '+DHCPName[5]+'></label></td></tr>';
dstr += '<td height="34"> </td><td height="34">Gateway</td><td>';
dstr += '<input name='+DHCPGateway[0]+' onChange='+DHCPGateway[1]+' type='+DHCPGateway[2]+' id='+DHCPGateway[0]+' value='+DHCPGateway[6]+' size='+DHCPGateway[3]+' maxlength='+DHCPGateway[4]+' class='+DHCPGateway[5]+'/></td>';dstr += '</tr></table></td>';
dstr += '<td width="80" align="left" valign="top" bordercolor="#FFFFFF"><p> </p></table></td><td width="80" align="left" valign="top" bordercolor="#FFFFFF"><p> </p></td></tr></table>';

document.write(dstr)
}
</script>
</BODY>
</HTML>

Thanks
Sally

pixelz · Jul 13, 2007

Hi Sally

I agree with Ferherke. You've applied your stylesheet to your document anyway, no matter what's on there, by the very virtue of the fact that it's in the HEAD tags - and you're writing your content afterwards. Is the stylesheet link working properly? Referencing the right place and file?

Cheers

Pix

SuperSal · Jul 13, 2007

Thanks Ferherke and pix, I am testing it in IE7 and just opening it directly from the file system. I suppose I just assumed the reason why the stylesheet wasnt being applied but if thats not the problem then i'm not sure what it could be. Here are the contents of the stylesheet:

tr, td{font-family: sans-serif, arial, "lucida console"; font-size: 1.0em; text-align: left; border:none;}

body{background-color:#DBDCE1;}

H1{font-family: sans-serif, arial, "lucida console"; font-size: 1.0em; text-align: left; }

table{border:none;}

H2{font-family: sans-serif, arial, "lucida console"; font-size: 1.0em; color:#2D4491;}

.style1 {color: #2D4491;}

I have checked that it is refencing the stylesheet correctly which it appears to be.

Sally

feherke · Jul 13, 2007

Hi

Sorry, but that code is plain nonsense. You can not write in a [tt]document[/tt] after is closed. Those [tt]document.write()[/tt] calls after loading the document in old browsers determined the rendering of a new [tt]document[/tt]. If this still happens in the modern browsers too, then it is clear while the page has no styiling anymore.

Code:

[s]document.write(dstr)[/s]
document.body.innerHTML=dstr

Feherke.

http://rootshell.be/~feherke/

feherke · Jul 13, 2007

Hi

Hmm... Or just do what Pix suggested long time before me... ( 13 Jul 07 6:24 ). That also works.

Feherke.

http://rootshell.be/~feherke/

SuperSal · Jul 13, 2007

Thanks Feherke, using document.body.innerHTML=dstr works, Actually I have only been working as a web developer for 2 weeks before that I was using vb.net so its a bit of a change for me!

I did try what pix suggested and it didn't work. In fact the page gets jammed each time it is opened and i end up having to close the browser with the task manager.

appreciate your help

Sally

feherke · Jul 13, 2007

Hi

Sally said:
I did try what pix suggested and it didn't work.

Then I probably made the some mistakes. Because for me Pix's suggestion works... With Mozillas, Opera, Safari and Explorer. Ok, its Explorer 6, but should not make any difference in this case.

Code:

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript" src="../Scripts/menuitems.js"></SCRIPT>
<LINK rel="stylesheet" type="text/css" href="../Stylesheets/Forms.css" >
</HEAD>
<BODY>
<script>
var dstr=""

function renderNetwork()
{
  [gray]# the big blah-blah still comes here...[/gray]
document.write(dstr)
}

[red]renderNetwork()[/red]
</script>
</BODY>
</HTML>

Feherke.

http://rootshell.be/~feherke/

SuperSal · Jul 13, 2007

Feerke, I did actually try calling the function this way to begin with which was where I noticed that the stylesheet wasn't rendering. Otherwise this is the way I would normally call a javascript function.

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript" src="../Scripts/menuitems.js"></SCRIPT>
<LINK rel="stylesheet" type="text/css" href="../Stylesheets/Forms.css">
</HEAD>
<BODY onLoad="renderNetwork();">
<script>
var dstr=""

function renderNetwork()
{

dstr += '<table width="1242" height="712" border="1"><tr><td .....blah blah.... bordercolor="#FFFFFF"><p> </p></td></tr></table>';

document.write(dstr)

}

renderNetwork()
</script>

</BODY>
</HTML>

feherke · Jul 13, 2007

Hi

Sally said:
In fact the page gets jammed each time it is opened and i end up having to close the browser with the task manager.

I think I found your previous problem. Was the revenge of your ugly indent-less coding style. You put the function call inside the function declaration, resulting an infinite recursion. If you would let it run more it would be stopped after a while...

Code:

function renderNetwork()
{
  # the big blah-blah still comes here...
document.write(dstr)

[red]renderNetwork()[/red]
}

Sally said:
[tt][small]<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript" src="../Scripts/menuitems.js"></SCRIPT>
<LINK rel="stylesheet" type="text/css" href="../Stylesheets/Forms.css">
</HEAD>[/small]
<BODY onLoad="[red]renderNetwork()[/red];">
[small]<script>
var dstr=""

function renderNetwork()
{

dstr += '<table width="1242" height="712" border="1"><tr><td .....blah blah.... bordercolor="#FFFFFF"><p> </p></td></tr></table>';

document.write(dstr)

}
[/small]
[red]renderNetwork()[/red]
[small]</script>

</BODY>
</HTML>[/small][/tt]

Called it twice ? I would better not do that...

Feherke.

http://rootshell.be/~feherke/

pixelz · Jul 13, 2007

Hey Sal,

OK, been playing with your concept. I'd say your best bet is to take your renderNetwork() function and define it in your header section. Then call your function in your body section. Not only will this seperate the two ideas physically into definition and instantiation, it will also make sure the the function definition is loaded first before it is called. This may be what's freaking your code out.

I played with the idea on a page of my own - see

http://www.ncri.org.uk/codetests/generateAll.html

The main function defining what has to be written is in the <HEAD></HEAD> tags so:

Code:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="../LPTF/styles/forumStyles.css" media="screen">
<script language="javascript" type="text/javascript">
	
	function writeItOut(title, name) {
		var o = new String;
		
		o += "<div class='bodyContent'>"
		o += "<h1>"+title+"</h1>"
		o += "<p>This is an autogenerated page to test the styling</p>"
		o += "<p>Signed</p>"
		o += "<h2>"+name+"</h2>";
		o += "</div>"
		
		document.write(o);
		
	}

	
</script>
</head>

also with the CSS stylesheet definition above it for good measure.

Then in the body we call the function:

Code:

<body>
<script language="javascript" type="text/javascript">
	writeItOut('THIS IS A TEST','Pixelz');
</script>
</body>

and this writes it out perfectly bringing in all the styles.

I would agree with Ferherke that the document.body.innerHTML technique is much better, but this is a direct solution to your problem as the code stands now.

I would go a step further, if I were you, and identify the places you can seperate content from structure and rather than writing it all to the page in one hit, manipulate the nodes in the DOM to adjust the content. Much better and more flexible solution.

anyway - hope this helps

cheers

Pix

pixelz · Jul 13, 2007

Hey again Sally,

have a look at the source code of this page:

http://www.ncri.org.uk/codetests/generateAllinDOM.html

That's what I meant about seperating content and structure. You pages will speed up dramatically if you render your structure in HTML first and them populate with dynamic content.

HTH!

Pix

SuperSal · Jul 13, 2007

Thanks pix, thats great, i will change the code around to the same structure. The problem with using document.body.innerHTML is that it doesnt seem to work in firefox.
Thanks again for your help, much appreciated

Sally

pixelz · Jul 13, 2007

No problems Sal.

Give us a lil pink star if this has helped you.

If you want to know more, I'd recommend:

Great primer on javascript:

http://www.w3schools.com/js/default.asp

Great primer on the HTML Document Object Model:

http://www.w3schools.com/htmldom/default.asp

Also get yourself Peachpit Press's Javascript for the World Wide Web by Tom Negrino and Dori Smith - has been my bible for years now!

http://www.amazon.com/JavaScript-Wo...2561402?ie=UTF8&s=books&qid=1184341455&sr=8-5

Have fun!

Pix

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Stysheet not applying to code generated on onload event. 2

SuperSal

Programmer

pixelz

Programmer

feherke

Programmer

SuperSal

Programmer

pixelz

Programmer

SuperSal

Programmer

feherke

Programmer

feherke

Programmer

SuperSal

Programmer

feherke

Programmer

SuperSal

Programmer

feherke

Programmer

pixelz

Programmer

pixelz

Programmer

SuperSal

Programmer

pixelz

Programmer

Similar threads

Part and Inventory Search

Sponsor