Loading CSS Style Sheet with XMLHTTP is erratic

[Spork52]

I'm using XMLHTTP to load the output of an ASP page that contains dynamically created CSS. The CSS modifies existing CSS that is imported to the head section via @import. The ASP page gets data from a MySQL database on a different host.

JavaScript is the only scripting language available in the situation because the pages are part of a host/shopping cart system that uses a mostly undocumented scripting language and database.

Anyway, here's what happens:

OS X FF & Safari: Usually works. Sometimes page loads w/out style modifications, then works on reload. Sometimes page loads w/out style modifications, then turns blank (source code is complete).

IE 6,7,8; FF: Page loads w/out style modifications, or crashes, or turns color of modified body backgroundcolor with source code showing only the imported stylesheet.

Questions:

1) I have the functions and the call to the XMLHTTP function in a file (myajax.inc) which is included in the body of the pages by using the mystery script language's include statement. When I tried splitting the include file up and putting the functions in the head, the page didn't work at all. Why would this be so?

2) The CSS that gets loaded ends up in the body of the page. Does this matter? Is there some way to append the output of the XMLHTTP to the head?

3) Why I am not getting the results I want?

4) Is there a better way of getting the CSS into the page?

Here's the script:

<script type="text/javascript">

function getQuerystring(key, default_)
/* from:
[URL unfurl="true"]http://www.bloggingdeveloper.com/post/JavaScript-QueryString-ParseGet-QueryString-with-Client-Side-JavaScript.aspx[/URL]
*/
	{
	if (default_==null) default_=""; 
	key = key.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
	var regex = new RegExp("[\\?&]"+key+"=([^&#]*)");
	var qs = regex.exec(window.location.href);
	if(qs == null)
	return default_;
	else
	return qs[1];
	}
	
function ajaxFunction(URL) //from: [URL unfurl="true"]http://www.w3schools.com/[/URL]
	{
	var xmlhttp;
	if (window.XMLHttpRequest)
		{
		// code for IE7+, Firefox, Chrome, Opera, Safari
		xmlhttp=new XMLHttpRequest();
		}
	else if (window.ActiveXObject)
		{
		// code for IE6, IE5
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
		}
	else
		{
		alert("Your browser does not support XMLHTTP!");
		}
	xmlhttp.onreadystatechange=function()
		{
		if(xmlhttp.readyState==4)
			{
			document.write(xmlhttp.responseText);
			}
		}
	xmlhttp.open("GET",URL,true);
	xmlhttp.send(null);
	}
	
var skinid = getQuerystring('skin_id');
var fullurl = "css/dynamic_css.asp?skin_id=" + skinid;
ajaxFunction(fullurl);

</script>

dynamic_css.asp outputs:

<style type="text/css" media="screen">
[a bunch of styles]
</style>

 

[feherke]

Hi

Using [tt]document.write[/tt] with AJAX sounds like the worst possible idea.

But let us start at the beginning. Why AJAX ? If you not want to process the requested data "manually" in your script, then just let the browser do its job and request the file.

I would remove the [tt]style[/tt] tags from dynamic_css.asp's output and use this :

window[teal].[/teal]onload[teal]=[/teal][b]function[/b][teal]()[/teal] [teal]{[/teal]
  [b]var[/b] link[teal]=[/teal]document[teal].[/teal][COLOR=darkgoldenrod]createElement[/color][teal]([/teal][green][i]'link'[/i][/green][teal])[/teal]
  [b]with[/b] [teal]([/teal]link[teal])[/teal] [teal]{[/teal]
    rel[teal]=[/teal][green][i]'stylesheet'[/i][/green]
    type[teal]=[/teal][green][i]'text/css'[/i][/green]
    href[teal]=[/teal][green][i]'dynamic_css.asp'[/i][/green]
  [teal]}[/teal]
  document[teal].[/teal][COLOR=darkgoldenrod]getElementsByTagName[/color][teal]([/teal][green][i]'head'[/i][/green][teal])[[/teal][purple]0[/purple][teal]].[/teal][COLOR=darkgoldenrod]appendChild[/color][teal]([/teal]link[teal])[/teal]
[teal]}[/teal]

Feherke.

http://rootshell.be/~feherke/

 

[Spork52]

The code in dynamic_css.asp has to get processed by the server before it gets loaded into the page. Is that going to be the case with your code?

 

[feherke]

Hi

The user agents can get files from the server only by requesting them from the web server. And there is no difference between requests, the web server will have no idea about who made request and will process them all in the same way. If the web server is instructed to execute the ASP code when an .asp file is requested, it will do it in the same way regardless who made the request.

Feherke.

http://rootshell.be/~feherke/

 

[Spork52]

Sounds good. Just finishing another job. I'll try it in a bit.

 

[Spork52]

Couldn't get it working. I put the script at the end of the head section, added semicolons, tried changing head to style in getElementsByTagName, and tried changing [0] to [1] so that the new style would be appended to the styles in the last style tag (there were two style tags in the head).

Also tried leaving the the style tags on and appending to the head. Also tried changing text/css to text/html, because FF said Error: The stylesheet

http://www.mydomain.com/css/dynamic_css.asp

was not loaded because its MIME type, "text/html", is not "text/css". Could that be why it's not working?

The styles don't update on the page. Here's one of the versions that I tried:

<script type="text/javascript">

window.onload = function()
	{
	var fullurl = "css/dynamic_css.asp";
	var link = document.createElement('link');
	with (link)
		{
		rel='stylesheet';
		type='text/html';
		href=fullurl;
		}
	document.getElementsByTagName('style')[1].appendChild(link);
	}
</script>

[dynamic_css.asp did not include style tags]

 

[Spork52]

Does the window.onload happen after everything is loaded into the browser? If so, the styles won't get applied, yeah?

 

[feherke]

Hi

The stylesheet

http://www.mydomain.com/css/dynamic_css.asp

was not loaded because its MIME type, "text/html", is not "text/css".

Then you have to correct it. But that is ASP and I know nothing about it.

However according to the help received from Google, you should insert this line before the proper CSS output begins :

<% response.ContentType="text/css" %>

Does the window.onload happen after everything is loaded into the browser?

Yes.

If so, the styles won't get applied, yeah?

Meaningless. Style can be changed when you want so.

Feherke.

http://rootshell.be/~feherke/

 

[Spork52]

Did everything you suggested, but it still didn't work, so I read up on nodes, children, appending, etc. Lo and behold, even though I swear I didn't change anything, it suddenly worked like a charm. Thank you.

 

[Spork52]

I removed window.onload = function(). The imported styles are now applied instantly instead of after the original styles flash momentarily on the screen. Is there any reason to use window.onload = function()?

 

[feherke]

Hi

Is there any reason to use window.onload = function()?

I put it there just to make sure that your style will be loaded after the others, to ensure it will not be overwritten by other style definitions.

( Another way to avoid the overwriting are the [tt]!important[/tt] rules. )

Feherke.

http://rootshell.be/~feherke/