43

I have an Ajax control that is loaded into a Yahoo popup using jQuery.

I just use a simple .get request to load the HTML.

  $.get(contentUrl, null, function(response) {
         $('#dialog').find('.bd').assertOne().html(response);
     }, "waitDlg");

Now the problem is that the content that is loaded needs its own CSS which is actually dynamically created. I have a choice of either inlining the or using an external CSS stylesheet.

Testing in Chrome shows that the CSS loaded via AJAX is not evaluated/applied at the time it is added to the DOM using the above code.

Internet Explorer will evaluate an inlined CSS when it just gets stuck in the DOM but Chrome will not. I am currently unable to test in FireFox because of a completely unrelated issue.

Is there any way in jQuery to evaluate a stylesheet that was dynamically added to the DOM as either an inline or ?

There are many reasons I'd like to do this:

  • the CSS in the popup belongs to the popup and may be coming from a different environment altogether
  • it is dynamic and I don't want to put it in the parent page unless I absolutely have to
  • I planned for it to work like this and it doesn't! :-(
Null
  • 1,950
  • 9
  • 30
  • 33
Simon_Weaver
  • 140,023
  • 84
  • 646
  • 689

3 Answers3

78

Given a path to your stylesheet (or some URL that will generate valid CSS):

var myStylesLocation = "myStyles.css";

...either one of these should work:

Load using AJAX

$.get(myStylesLocation, function(css)
{
   $('<style type="text/css"></style>')
      .html(css)
      .appendTo("head");
});

Load using dynamically-created <link>

$('<link rel="stylesheet" type="text/css" href="'+myStylesLocation+'" >')
   .appendTo("head");

Load using dynamically-created <style>

$('<style type="text/css"></style>')
    .html('@import url("' + myStylesLocation + '")')
    .appendTo("head");

or

$('<style type="text/css">@import url("' + myStylesLocation + '")</style>')
    .appendTo("head");
Georg Schölly
  • 124,188
  • 49
  • 220
  • 267
Shog9
  • 156,901
  • 35
  • 231
  • 235
  • this looks great. AFAYK are these all 'supported' ways of doing this or is this at all hacky? it looks very promising but i'm worried about the one browser that won't let me do this. – Simon_Weaver Apr 30 '09 at 07:02
  • 1
    They're all valid, but the only way to know for sure if a given browser reacts to the changing DOM correctly is to try it. The last two (thanks, gs!) come with an additional caveat: if your server is misconfigured and sends your CSS down with the wrong MIME type, Firefox will ignore it unless your page is in quirks mode. – Shog9 Apr 30 '09 at 07:41
  • 1
    works great : $('') .appendTo("head"); – Simon_Weaver Apr 30 '09 at 09:04
  • may not work on IE7. have not verified yet - but please see answer from @user406905 – Simon_Weaver Jan 21 '11 at 04:30
  • 9
    Would be cool if StackOverflow has a little popup testing matrix with all the browsers and versions and we could mark which combinations worked for each answer. A bit like this http://matrix.cpantesters.org/?dist=WWW-Mechanize+1.72 – Matthew Lock Apr 27 '12 at 09:29
  • @Shog9 amazing!!! IMHO the dynamically-created link is perfect to be put on the block response of the ajax request. thanks. – Paulo Bueno Jul 17 '12 at 20:29
  • I'm downvoting because the answer summary does not contain the answer of user406905 and I could reproduce problems with loading technics other than document.createStyleSheet for the case of IE 8. It did not always happen (simple test pages seemed to load the css) but the bigger the page, the more often the css was not loaded at all. – Toskan Oct 02 '12 at 13:12
  • Thats great, But how can i remove the same style i've just loaded with Ajax? – Roee Yossef Mar 28 '18 at 11:03
27

The accepted answer will not work in IE 7 (and buggy in IE 8). the following will work in IE as well as FF and chrome/safari:

var url = 'urlOfStyleSheet.css'
if(document.createStyleSheet) {
    try { document.createStyleSheet(url); } catch (e) { }
}
else {
    var css;
    css         = document.createElement('link');
    css.rel     = 'stylesheet';
    css.type    = 'text/css';
    css.media   = "all";
    css.href    = url;
    document.getElementsByTagName("head")[0].appendChild(css);
}
user406905
  • 1,418
  • 15
  • 16
  • 1
    thanks! now if i could only remember where i used this so i could go change it – Simon_Weaver Jan 21 '11 at 04:29
  • this works in ie8 but not ie7. The accepted answer does not work in either. – orourkedd Aug 22 '12 at 22:01
  • this works for IE 8 `document.createStyleSheet` and yes: the other technics seem very buggy with IE 8. They can work, but the bigger the page / the slower the load, it seemed to stop working. `document.createStyleSheet`worked great so far for me – Toskan Oct 02 '12 at 13:13
1
var cssPath = "/path/to/css/";

var linkStr = document.createElement("&lt;link rel='stylesheet' type='text/css' href='"+cssPath+"' media='screen' /&gt;");

document.getElementsByTagName("head")[0].appendChild(linkStr);
Rafael Herscovici
  • 16,558
  • 19
  • 65
  • 93