Ticket #8574 (closed bug: invalid)
append() to head not working in 1.5
| Reported by: | ratko.rudic@… | Owned by: | ratko.rudic@… |
|---|---|---|---|
| Priority: | low | Milestone: | 1.next |
| Component: | unfiled | Version: | 1.5.1 |
| Keywords: | Cc: | ||
| Blocking: | Blocked by: |
Description
Appending additional css file does not work in IE in jquery 1.5. It does work in 1.4 (in FF it works ok with jquery 1.4 and 1.5):
$j("head").append("<link href='some.css' type='text/css' rel='stylesheet' />");
Simple test code:
<html>
<head>
<link href="blue.css" type="text/css" rel="stylesheet" />
<!-- JQuery -->
<script type="text/javascript" src="jquery-1.5.1.min.js"></script>
<script>
var $j = jQuery.noConflict();
$j("head").append("<link id='test1' href='red.css' type='text/css' rel='stylesheet' />");
</script>
</head>
<body>
<div id="a">Test string</div>
</body>
</html>
blue.css:
#a {
background-color: #FF0000;
}
red.css:
#a {
background-color: #0000FF;
}
In IE and jquery 1.5, DIV's background remains blue, with 1.4. it is red (as shoud be).
Change History
comment:2 Changed 2 years ago by anonymous
Yes, true, this works. But it can also be rather annoying if you don't know how many additional css files you need to load.
I have here a page that needs to load 0, 1 or 2 additional css files. Having all the time two empty link tags waiting just for that 1% of users that need those two additional css files, seems excessive.
It would be much nicer to just add them to head when necessary.
Thanks for the good tip though!
comment:4 Changed 2 years ago by dmethvin
- Owner set to ratko.rudic@…
- Status changed from new to pending
You are trying to append to the head before it is closed. Can you create a test case that uses a .ready() to do the append?
comment:5 Changed 2 years ago by timmywil
http://jsfiddle.net/timmywil/KTAcx/ works fine in IE
comment:6 Changed 2 years ago by addyosmani
- Keywords needsdocs added
- Priority changed from undecided to low
- Status changed from pending to closed
- Resolution set to invalid
Please see here for a correct test case from timmywil: http://jsfiddle.net/timmywil/KTAcx/. This is working fine in IE and we probably just need to improve the documentation around the behavior. Adding needsdocs.
comment:7 Changed 2 years ago by danheberden
fwiw a test case with visual proof: http://jsfiddle.net/danheberden/mmd3Y/2/
comment:8 follow-ups: ↓ 11 ↓ 12 Changed 2 years ago by ratko.rudic@…
Hey, wait, I narrowed it a bit...
IE doesn't work if you link css file locally. ie: $('head').append("<link href='red.css' type='text/css' rel='stylesheet' />");
but renders page properly and adds css if you use the whole URL address: $('head').append("<link href=' http://mydomain.com/red.css' type='text/css' rel='stylesheet' />");
can you reopen this ticket?
comment:9 Changed 2 years ago by ratko.rudic@…
Btw, placing append() into .ready() makes no difference.
comment:10 Changed 2 years ago by netrunner
I still think something should be done about this, since the behavior has been inconsistent across jquery versions. See Ticket #8607
comment:11 in reply to: ↑ 8 Changed 2 years ago by netrunner
Replying to ratko.rudic@…:
Hey, wait, I narrowed it a bit...
IE doesn't work if you link css file locally. ie: $('head').append("<link href='red.css' type='text/css' rel='stylesheet' />");
but renders page properly and adds css if you use the whole URL address: $('head').append("<link href=' http://mydomain.com/red.css' type='text/css' rel='stylesheet' />");
can you reopen this ticket?
I can confirm that using the whole url works.
comment:12 in reply to: ↑ 8 Changed 2 years ago by anonymous
Replying to ratko.rudic@…:
Hey, wait, I narrowed it a bit...
IE doesn't work if you link css file locally. ie: $('head').append("<link href='red.css' type='text/css' rel='stylesheet' />");
but renders page properly and adds css if you use the whole URL address: $('head').append("<link href=' http://mydomain.com/red.css' type='text/css' rel='stylesheet' />");
can you reopen this ticket?
I can confirm that using the whole url works.
comment:13 Changed 2 years ago by dmethvin
- Keywords needsdocs removed
We still don't have a test case showing the problem, and the posted solutions involve using a full URL which jQuery generally wouldn't touch. So I'll remove the needsdocs on this.
Please follow the bug reporting guidlines and use jsFiddle when providing test cases and demonstrations instead of pasting the code in the ticket.
Although I guess the above should work, I took a different approach:
In my .html I've added:
Then later on in my code, point to a .css file: