Programmatically added Stylesheet Element not being honored by dom

Question

In our web app, I'm trying to hit our server to determine if they have made any custom CSS tweaks to the layout of the web app. Upon getting a boolean flag of this, I'm returning the CSS from the server and injecting a new head link after the last one...

The problem is, this isn't updating the page's style or layout. If I go into the sources of the page elements and click on that CSS document in the dev console, I can force it to "notice" that this css is available by simply changing the value of a style reference.

This is the jquery I'm using to inject the CSS :

$("head link[rel='stylesheet']").last().after("<link rel='stylesheet' href='4DACTION/WEB_Mobile_CustomCSS' type='text/css' media='screen'>");

Any idea why it wouldn't force the page to use it until I've made a change to it in the debugger?

Answer 1

I used Bootstrap to create an example doing exactly what you described using your code in a setTimeout callback:

setTimeout(function () {
    $("head link[rel='stylesheet']").last().after("<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css' type='text/css' media='screen'>");
}, 1000);

check it out: http://jsfiddle.net/v089p29a/ it switches from flat buttons to 3D ones.

I'm not sure why this is not working for you. Maybe your URL is not valid like adeneo suggested. Also be sure to put your code in the $(window).load() or $(document).ready() event handlers to ensure that the DOM is ready to be manipulated.