#8574 closed bug (invalid)

Opened March 21, 2011 10:11AM UTC

Closed March 30, 2011 06:06PM UTC

Last modified March 14, 2012 04:21PM UTC

append() to head not working in 1.5

Reported by:	ratko.rudic@pop-tv.si	Owned by:	ratko.rudic@pop-tv.si
Priority:	low	Milestone:	1.next
Component:	unfiled	Version:	1.5.1
Keywords:		Cc:
Blocked by:		Blocking:

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).

Attachments (0)

Change History (13)

Changed March 21, 2011 01:08PM UTC by Yomodo comment:1

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:

$("#css-Customer").attr("href", css);

Changed March 23, 2011 09:47AM UTC by anonymous comment:2

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!

Changed March 30, 2011 05:59PM UTC by dmethvin comment:3

#8607 is a duplicate of this ticket.

Changed March 30, 2011 06:01PM UTC by dmethvin comment:4

owner:	→ ratko.rudic@pop-tv.si
status:	new → 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?

Changed March 30, 2011 06:05PM UTC by timmywil comment:5

http://jsfiddle.net/timmywil/KTAcx/ works fine in IE

Changed March 30, 2011 06:06PM UTC by addyosmani comment:6

keywords:	→ needsdocs
priority:	undecided → low
resolution:	→ invalid
status:	pending → closed

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.

Changed March 30, 2011 06:06PM UTC by danheberden comment:7

fwiw a test case with visual proof: http://jsfiddle.net/danheberden/mmd3Y/2/

Changed March 30, 2011 07:50PM UTC by ratko.rudic@pop-tv.si comment:8

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?

Changed March 30, 2011 08:08PM UTC by ratko.rudic@pop-tv.si comment:9

Btw, placing append() into .ready() makes no difference.

Changed March 31, 2011 01:53PM UTC by netrunner comment:10

I still think something should be done about this, since the behavior has been inconsistent across jquery versions. See Ticket #8607

Changed March 31, 2011 01:57PM UTC by netrunner comment:11

_comment0:	Replying to [comment:8 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? \ → 1301580138952505

_comment0:

Replying to [comment:8 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? \ → 1301580138952505

Replying to [comment:8 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.

Changed March 31, 2011 02:00PM UTC by anonymous comment:12