Bug Tracker

Modify

Ticket #8574 (closed bug: invalid)

Opened 3 years ago

Last modified 2 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 3 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 3 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 3 years ago by dmethvin

#8607 is a duplicate of this ticket.

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

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

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

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

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

comment:10 Changed 3 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 3 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 3 years ago by netrunner (previous) (diff)

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

Please follow the  bug reporting guidlines and use  jsFiddle when providing test cases and demonstrations instead of pasting the code in the ticket.

View

Add a comment

Modify Ticket

Action
as closed
Author


E-mail address and user name can be saved in the Preferences.

 
Note: See TracTickets for help on using tickets.