0

This type question has been asked a number of times, but I can't find a solution that fits exactly what I am looking for..

I have a large App based in Ajax. Ajax responses includes HTML and JavaScript files used to build pages, widgets and so on.

I would like to load the CSS for these widgets on the fly via the ajax JavaScript calls. There can be any number of CSS files loaded dynamically as and when required. The most commonly accepted way (from what I can see) is to place an id on the link tag and target that, but as i am including an undetermined number of external style sheets, this will not work..

Any suggestions on how to solve this problem would be appreciated..

I am using Dojo to power the app, if that it of any help..

Thanks

Lee
  • 5,816
  • 6
  • 45
  • 61
  • You can chect it; [loading css with js][1] [1]: http://stackoverflow.com/questions/574944/how-to-load-up-css-files-using-javascript – Fatih Donmez Nov 01 '11 at 10:04

2 Answers2

0

We load as well many widgets on the fly in our app.

Each widget is an HTML + JS + CSS that is loaded with an IFRAME.

Once the IFRAME is loaded, you can loop on the LINK in the HEAD and import them in the main page.
The same apply for the HTML, in our case it is a set of pure.js templates.

The JS extend automatically at load time a global object in the main page.

Mic
  • 24,812
  • 9
  • 57
  • 70
0

Be careful about dynamically loading CSS. CSS is loaded asynchronously so you can get race conditions with widgets that do layout in Javascript such as BorderContainer.

You can put all your necessary CSS in a file with import statements. For example, from claro.css

@import url("../dijit.css");
@import url("../../icons/commonIcons.css");
@import url("Common.css");
...

and then use the build tool to compact everything for production.

hugomg
  • 68,213
  • 24
  • 160
  • 246