ajax doesn't load css on the fly

system9898 · Jun 28, 2007

I have a page which in the main document, the css includes a background image. Then, you click on a link and ajax dynamically loads another page. The problem is, that the new AJAX page seems to be using the master doc's css and not the new page's css, which it should. That makes total sense as to why, but how do I correct this? I need to load a new css, just for that ajax block...

Here's the ajax code:

Code:

function ahah(url, target) {
  
  n = Math.floor(Math.random()*50);
  img = 'ani_progressindicator.gif';  //default
  if (n % 5 == 0) img = 'ani_snacky.gif';
  if (n % 5 == 1) img = 'ani_snackyhead.gif';
  
  document.getElementById(target).innerHTML = ' <img src="/images/' + img + '">';
  
  if (window.XMLHttpRequest) {
	req = new XMLHttpRequest();
  } else if (window.ActiveXObject) {
	req = new ActiveXObject("Microsoft.XMLHTTP");
  }
  if (req != undefined) {
	req.onreadystatechange = function() {ahahDone(url, target);};
	req.open("GET", url, true);
	req.send("");
  }
}
function ahahDone(url, target) {
  if (req.readyState == 4) { // only if req is "loaded"
	if (req.status == 200) { // only if "OK"
	  obj=document.getElementById(target);
	  obj.innerHTML = req.responseText;
	  execJS(obj);
	} else {
	  document.getElementById(target).innerHTML=" AHAH Error:\n"+ req.status + "\n" +req.statusText;
	}
  }
}
function load( div, name) {
	ahah(name,div);
	//document.getElementById(div).style.backgroundColor="#F6F6F6";
	return false;
}
function execJS(node) { 
	  var bSaf = (navigator.userAgent.indexOf('Safari') != -1);
	  var bOpera = (navigator.userAgent.indexOf('Opera') != -1);       
	  var bMoz = (navigator.appName == 'Netscape');       
	  var st = node.getElementsByTagName('SCRIPT');       
	  var strExec;       
	  for(var i=0;i<st.length; i++) {               
		if (bSaf) {                       
			strExec = st[i].innerHTML;               
		} else if (bOpera) {                       
			strExec = st[i].text;               
		} else if (bMoz) {                       
			strExec = st[i].textContent;               
		} else {                       
			strExec = st[i].text;               
		}               
		try {                       
			eval(strExec);               
		} catch(e) {                       
			alert(e);               
		}       
	  }
}

kaht · Jun 28, 2007

Your question is less about ajax and more about how to load a stylesheet with javascript. So, here's a solution - you can incorporate this code in with your own to achieve the desired effect [smile]

first, the stylesheet:

Code:

body {
   background-color:#ff0000;
}

second, the javascript to dynamically load the stylesheet:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<title>dynamica css test</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript">

window.onload = function () {
   var newStyleSheet = document.createElement("link");
   newStyleSheet.setAttribute("type", "text/css");
   newStyleSheet.setAttribute("rel", "stylesheet");
   newStyleSheet.setAttribute("href", "blah.css");
   document.getElementsByTagName("head")[0].appendChild(newStyleSheet);
}

</script>
<style type="text/css"></style>
</head>
<body>

<p>If the stylesheet loads the background will turn red</p>

</body>
</html>

-kaht

Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson

system9898 · Jun 28, 2007

won't this change the bg color of the entire page? All I want is for the ajax div to change bg color....

i think I just answered my own question. after loading, I will update the div's bg color.

monksnake · Jun 28, 2007

????

<.

kaht · Jun 28, 2007

Um.... I didn't intend for you to use the stylesheet I posted above. It was merely the test case that I typed up on my own machine, ran it to verify it worked, and then pasted it here in case you needed a working example. Like you said in your first post:

[!]I need to load a new css[/!], just for that ajax block...

So, I provided an example of how to do that. I didn't expect you to use my exact code verbatim, any more than you would use an example out of a book for a work project. Nevertheless, the last line in your last post insinuates that you have found the solution.

-kaht

Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson

system9898 · Jun 28, 2007

i think we're on the same page. Thanks for your help!

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!

ajax doesn't load css on the fly

system9898

Programmer

kaht

Programmer

system9898

Programmer

monksnake

Programmer

kaht

Programmer

system9898

Programmer

Similar threads

Part and Inventory Search

Sponsor