0

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?

btbJosh
  • 305
  • 2
  • 12
  • This may not have anything to do with anything... but is it the same in more than one browser? – gloomy.penguin Oct 01 '14 at 18:01
  • Well, doesn't it have to fire an HTTP request after you make this change in order for it to be "noticed"? – Feign Oct 01 '14 at 18:03
  • Another idea, you could just use Document.write() to write any CSS (not the link, but CSS itself) and it wouldn't fire an extra HTTP request in this way. – Feign Oct 01 '14 at 18:04
  • Can you give a reason not to, adeneo? I'm sure we could all learn from you. – Feign Oct 01 '14 at 18:06
  • What do you mean by *I'm returning the CSS from the server*? – LcSalazar Oct 01 '14 at 18:07
  • 1
    First of all, do you have other stylesheets, otherwise `last()` won't find anything. Secondly `4DACTION/WEB_Mobile_CustomCSS` doesn't look like a valid URL to a stylesheet ? – adeneo Oct 01 '14 at 18:07
  • 1
    @Feign - Just search for `document.write` and `bad idea` or something similar, and you'll figure it out. – adeneo Oct 01 '14 at 18:07
  • 1
    possible duplicate of [Jquery add css to head](http://stackoverflow.com/questions/12093509/jquery-add-css-to-head) – gearsdigital Oct 01 '14 at 18:24
  • I've noticed this issue in Chrome before on our site but never had a chance to pin point the cause. As @gloomy.penguin suggested, have you tried to see if the same issue occurs in other browsers? Also, can you specify which particular style declarations are not having an effect? – Hayko Koryun Oct 01 '14 at 19:09
  • @adeneo Yes, there will always be a couple of other stylesheets present. The reason for the odd request name is because this is a 4D Database. That's a method call to the DB that returns the respective document. In this case it's a large list of CSS declarations. – btbJosh Oct 01 '14 at 20:16
  • @gearsdigital I'm not asking how to do it (As that thread states) but why it's not performing as expected. I already have it showing up in my head. ..HaykoKoryun I've tested it in Safari and it doesn't work there either. – btbJosh Oct 01 '14 at 20:17

1 Answers1

0

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.

Community
  • 1
  • 1
niiyeboah
  • 1,320
  • 9
  • 18
  • Thanks. I ended up just sending back plain text and injecting it into a `style` tag in the `head`... Not sure why my stylesheet method wasn't working. – btbJosh Oct 01 '14 at 21:12