I ran into the problem discussed here:
http://groups.google.com/group/rubyonrails-spinoffs/browse_frm/thread/61a0fa25d3abdf3a/4a1ea48726c50b68?lnk=gst&q=ajax.updater+style&rnum=2&
Essentially, this is the exact same problem that the <script> tag faces. Prototype already has a solution there, in evalScripts().
The same technique works for <style>, which is just to PARSE the responseText for the desired data and then add it manually to the head element. This is described well here:
http://www.phpied.com/dynamic-script-and-style-elements-in-ie/
I actually needed to fix this in YUI, not prototype (although I use both), but you'll get the idea. You could easily patch prototype to do the same. I simply call this function with the "responseText" from the XHR in my XHR success callback.
Here's the browser differences:
1. Firefox handles this already, so you don't need to do anything for FF.
2. For Safari, you must insert the style tag into the head via the DOM.
3. For IE, you must insert the style tag into the head via IE's goofy "styleSheet" property of the head element.
YAHOO.widget.PhocoaDialog.prototype.applyStyles = function(rawHTML) {
if (this.browser == 'gecko') return;
var headEl = null; // lazy-load
// find all styles in the string
var styleFragRegex = '<style[^>]*>([\u0001-\uFFFF]*?)</style>';
var matchAll = new RegExp(styleFragRegex, 'img');
var matchOne = new RegExp(styleFragRegex, 'im');
var styles = (rawHTML.match(matchAll) || []).map(function(tagMatch) {
return (tagMatch.match(matchOne) || ['', ''])[1];
});
// add all found style blocks to the HEAD element.
for (i = 0; i < styles.length; i++) {
if (!headEl)
{
headEl = document.getElementsByTagName('head')[0];
if (!headEl)
{
return;
}
}
var newStyleEl = document.createElement('style');
newStyleEl.type = 'text/css';
if (this.browser == 'ie')
{
newStyleEl.styleSheet.cssText = styles[i];
}
else
{
var cssDefinitionsEl = document.createTextNode(styles[i]);
newStyleEl.appendChild(cssDefinitionsEl);
}
headEl.appendChild(newStyleEl);
}
};
