Side navigation
#4450 closed bug (invalid)
Opened March 30, 2009 12:30PM UTC
Closed November 20, 2010 09:07PM UTC
<base> tag causes .append() to fail in IE
Reported by: | paresh | Owned by: | |
---|---|---|---|
Priority: | major | Milestone: | 1.4 |
Component: | manipulation | Version: | 1.3.2 |
Keywords: | Cc: | IE | |
Blocked by: | Blocking: |
Description
Hi,
In asp.net i want the image to resize to the browser window size for which iam using the following code which works fine in mozilla but in IE it does'nt append the resize image:
<asp:Content ContentPlaceHolderID="head" runat="server"> <script type="text/javascript" src="<%=Url.Content("~/Scripts/jquery-1.3.2.js")%>"></script> <script type="text/javascript" src="<%=Url.Content("~/Scripts/jquery.cookie.js")%>"></script> <script type="text/javascript" src="<%=Url.Content("~/Scripts/jquery.timers.js")%>"></script> <script type="text/javascript"> function loadImage() { var image = new Image(); //Code added to find height and width of the client window for different browser var myWidth = 0, myHeight = 0; if (typeof (window.innerWidth) == 'number') { //Non-IE myWidth = window.innerWidth; myHeight = window.innerHeight; } else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) { //IE 6+ in 'standards compliant mode' myWidth = document.documentElement.clientWidth; myHeight = document.documentElement.clientHeight; } else if (document.body && (document.body.clientWidth || document.body.clientHeight)) { //IE 4 compatible myWidth = document.body.clientWidth; myHeight = document.body.clientHeight; } image.width = myWidth - 10; image.height = myHeight - 20; var url = '<%=Url.Action("DisplayMap")%>?t=' + new Date().getTime(); $(image).load(function() { $('#map').empty().append(image); triggerRefresh(); }).attr('src', url); } function triggerRefresh() { var connectionTypeValue = $.cookie('WebUI.ConnectionValue'); // Default value if (connectionTypeValue == null) { connectionTypeValue = 1; } $('#map').oneTime(parseInt(connectionTypeValue), function() { loadImage(); }); } $(document).ready(function() { loadImage(); }); </script> </asp:Content> <asp:Content ContentPlaceHolderID="body" runat="server"> <div id="map"> </div> </asp:Content>
Attachments (0)
Change History (4)
Changed March 30, 2009 10:44PM UTC by comment:1
Changed April 03, 2009 12:31PM UTC by comment:2
I have the same problem (not only $.append but also appendChild).
In my test the problem is caused by tag <base />
http://maxb.net/scripts/base/bug-on.html
Changed June 12, 2010 02:19PM UTC by comment:3
cc: | → IE |
---|---|
component: | unfiled → manipulation |
summary: | .append () not working properly in Internet Explorer → <base> tag causes .append() to fail in IE |
The test case shows this is a bug below jQuery in IE, but there may be a way to work around it.
Changed November 20, 2010 09:07PM UTC by comment:4
description: | Hi, \ \ In asp.net i want the image to resize to the browser window size for which iam using the following code which works fine in mozilla but in IE it does'nt append the resize image: \ \ <asp:Content ContentPlaceHolderID="head" runat="server"> \ <script type="text/javascript" src="<%=Url.Content("~/Scripts/jquery-1.3.2.js")%>"></script> \ <script type="text/javascript" src="<%=Url.Content("~/Scripts/jquery.cookie.js")%>"></script> \ <script type="text/javascript" src="<%=Url.Content("~/Scripts/jquery.timers.js")%>"></script> \ <script type="text/javascript"> \ function loadImage() \ { \ var image = new Image(); \ \ //Code added to find height and width of the client window for different browser \ var myWidth = 0, myHeight = 0; \ if (typeof (window.innerWidth) == 'number') { \ //Non-IE \ myWidth = window.innerWidth; \ myHeight = window.innerHeight; \ } else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) { \ //IE 6+ in 'standards compliant mode' \ myWidth = document.documentElement.clientWidth; \ myHeight = document.documentElement.clientHeight; \ } else if (document.body && (document.body.clientWidth || document.body.clientHeight)) { \ //IE 4 compatible \ myWidth = document.body.clientWidth; \ myHeight = document.body.clientHeight; \ } \ \ image.width = myWidth - 10; \ image.height = myHeight - 20; \ \ \ var url = '<%=Url.Action("DisplayMap")%>?t=' + new Date().getTime(); \ \ $(image).load(function() \ { \ $('#map').empty().append(image); \ triggerRefresh(); \ }).attr('src', url); \ } \ \ function triggerRefresh() \ { \ var connectionTypeValue = $.cookie('WebUI.ConnectionValue'); \ \ // Default value \ if (connectionTypeValue == null) \ { \ connectionTypeValue = 1; \ } \ \ $('#map').oneTime(parseInt(connectionTypeValue), function() \ { \ loadImage(); \ }); \ } \ \ $(document).ready(function() { \ loadImage(); \ }); \ \ </script> \ \ </asp:Content> \ <asp:Content ContentPlaceHolderID="body" runat="server"> \ <div id="map"> \ </div> \ </asp:Content> \ → Hi, \ \ In asp.net i want the image to resize to the browser window size for which iam using the following code which works fine in mozilla but in IE it does'nt append the resize image: \ \ {{{ \ <asp:Content ContentPlaceHolderID="head" runat="server"> \ <script type="text/javascript" src="<%=Url.Content("~/Scripts/jquery-1.3.2.js")%>"></script> \ <script type="text/javascript" src="<%=Url.Content("~/Scripts/jquery.cookie.js")%>"></script> \ <script type="text/javascript" src="<%=Url.Content("~/Scripts/jquery.timers.js")%>"></script> \ <script type="text/javascript"> \ function loadImage() \ { \ var image = new Image(); \ \ //Code added to find height and width of the client window for different browser \ var myWidth = 0, myHeight = 0; \ if (typeof (window.innerWidth) == 'number') { \ //Non-IE \ myWidth = window.innerWidth; \ myHeight = window.innerHeight; \ } else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) { \ //IE 6+ in 'standards compliant mode' \ myWidth = document.documentElement.clientWidth; \ myHeight = document.documentElement.clientHeight; \ } else if (document.body && (document.body.clientWidth || document.body.clientHeight)) { \ //IE 4 compatible \ myWidth = document.body.clientWidth; \ myHeight = document.body.clientHeight; \ } \ \ image.width = myWidth - 10; \ image.height = myHeight - 20; \ \ \ var url = '<%=Url.Action("DisplayMap")%>?t=' + new Date().getTime(); \ \ $(image).load(function() \ { \ $('#map').empty().append(image); \ triggerRefresh(); \ }).attr('src', url); \ } \ \ function triggerRefresh() \ { \ var connectionTypeValue = $.cookie('WebUI.ConnectionValue'); \ \ // Default value \ if (connectionTypeValue == null) \ { \ connectionTypeValue = 1; \ } \ \ $('#map').oneTime(parseInt(connectionTypeValue), function() \ { \ loadImage(); \ }); \ } \ \ $(document).ready(function() { \ loadImage(); \ }); \ \ </script> \ \ </asp:Content> \ <asp:Content ContentPlaceHolderID="body" runat="server"> \ <div id="map"> \ </div> \ </asp:Content> \ }}} |
---|---|
resolution: | → invalid |
status: | new → closed |
Thanks for the report, but this is not a jQuery bug. IE treats the <base>
tag like a tag that requires a closing tag, and if you don’t do so, bad things happen. Replacing the base tag with <base href="foo"><!--[if LT IE 8]></base><![endif]-->
fixes the problem.
Can you attach a simple test case that is just plain HTML and Javascript that doesn't require ASP.NET to test?