Bug Tracker

Ticket #8574 (closed bug: invalid)

Opened 4 years ago

Last modified 3 years ago

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:1 Changed 4 years ago by Yomodo

Although I guess the above should work, I took a different approach:

In my .html I've added:

<link id="css-Customer" rel="stylesheet" type="text/css" href=""/>

Then later on in my code, point to a .css file:

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

comment:2 Changed 4 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:3 Changed 4 years ago by dmethvin

#8607 is a duplicate of this ticket.

comment:4 Changed 4 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 4 years ago by timmywil

comment:6 Changed 4 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 4 years ago by danheberden

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

comment:8 follow-ups: ↓ 11 ↓ 12 Changed 4 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 4 years ago by ratko.rudic@…

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

comment:10 Changed 4 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 4 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.

Last edited 4 years ago by netrunner (previous) (diff)

comment:12 in reply to: ↑ 8 Changed 4 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 3 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.

Note: See TracTickets for help on using tickets.