Skip to main content

Bug Tracker

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 dmethvin comment:1

Can you attach a simple test case that is just plain HTML and Javascript that doesn't require ASP.NET to test?

Changed April 03, 2009 12:31PM UTC by maxb 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

http://maxb.net/scripts/base/bug-off.html

http://maxb.net/scripts/base/base.html

Changed June 12, 2010 02:19PM UTC by dmethvin comment:3

cc: → IE
component: unfiledmanipulation
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 snover 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: newclosed

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.