UpdatePanel postback changes anchor HREF to fully-qualified

Question

I have some links in an UpdatePanel. For example:

<a href="Products.aspx">Products</a>

I also have a CSS rule that puts an icon next to off-site links (those that have an HREF that starts with "http"):

a[href^="http"]
{
    padding-right: 18px;
    background: transparent url("Icons/offsiteLink.png") no-repeat right bottom;
}

When the page loads initailly, the links correctly do not have the off-site icon. The problem is that after an Ajax postback using the UpdatePanel, the icon appears next to the links! I added a hover event to display the href attribute, and it has indeed been changed to have the full path to the page after the Ajax postback. It doesn't matter if the links are plain HTML tags or a TreeView node.

Is this an issue with ASP.NET, or Ajax in general? Can I stop it?

Thanks.

Update:

I have created a brand new Web Site project. This is in Visual Studio 2008/.NET 3.5. Here is the entirety of the code:

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Test</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="mainScriptManager" runat="server" />
    <asp:UpdatePanel ID="updatePanel1" runat="server">
        <ContentTemplate>
            <p><a id="internalLink" href="About.aspx"
                onmouseover="$('#hrefValue').text($(this).attr('href'));">About</a></p>
            <p><a id="offsiteLink" href="http://example.com/"
                onmouseover="$('#hrefValue').text($(this).attr('href'));">Offsite</a></p>
            <p>HREF: <span id="hrefValue"></span></p>
            <asp:Button ID="submitButton" Text="Post Back" runat="server" />
        </ContentTemplate>
    </asp:UpdatePanel>
    </form>
</body>
</html>

(The code behind is empty.)

When I load the page in IE 7 and hover the links, I get:

About.aspx
http://example.com/

Then, I click the button, and hover the links again. This time they are:

Notice that the first one changed to the full path.

I cannot reproduce this behaviour in test application - href attribute is permanent. My code: " Products
". — vladimir, Aug 09 '11 at 20:40
Strange. I created a brand new web site project, and could duplicate the behavior. I will update the post with the exact code. I should have mentioned that I'm using .NET 3.5. — ThatMatthew, Aug 10 '11 at 14:45
I repeated test on .NET3.5 - it's ok - href isnt been changed. May be you try to run my example? — vladimir, Aug 10 '11 at 14:55
I have repeated your example, with my same results. Very odd. I'm using IE 7; maybe that's it? — ThatMatthew, Aug 10 '11 at 15:04
Wow! Im using IE8, but after switch one to IE7 browse mode I got it! Really interesting :) — vladimir, Aug 10 '11 at 15:17
Ah, another reason to hate IE! Well thanks for verifying this. I'm sorry I didn't mention my browser earlier! I've been stuck on IE 7 here at work for so long that I forget about it. Thanks for your help, and sorry I wasted your time by not giving all the facts. — ThatMatthew, Aug 10 '11 at 15:29
@ThatMattew see [stackoverflow post][1] about this.. [1]: http://stackoverflow.com/q/1593174/303298 — vladimir, Aug 10 '11 at 15:52
@vlad I was aware of IE's weird behavior for the href attribute, but even using the (fake) overload "getAttribute('href', 2)", it still gave me the fully-qualified URL. This lead me to believe it was a .NET issue. Thanks. — ThatMatthew, Aug 10 '11 at 16:11

score 1 · Answer 1 · edited May 23 '17 at 12:04

1

Instead of looking for "http", you could add a rel="external" attribute to external site links, then style them using:

a[rel=external] {

}

See CSS - style a link based on its "rel" attribute?

edited May 23 '17 at 12:04

Community

1
1

answered Aug 10 '11 at 15:08

mgnoonan

7,060
5
24
27

Good idea. I may end up doing that. But I have so many links that it would be cumbersome. I am looking at a JavaScript solution right now. – ThatMatthew Aug 10 '11 at 15:31

score 1 · Accepted Answer · answered Aug 10 '11 at 16:05

It turns out that this was caused by an issue with IE7. IE8 no longer has the issue.

Due to several factors, I decided to use JavaScript to fix it. Here is that code. I also included a snarky comment about my company still targeting IE7 ;)

company.offsiteIconFix = (function() {

    function init() {
        var i, allAnchors = document.getElementsByTagName("a");

        for (i = 0; i < allAnchors.length; i++) {
            if (allAnchors[i].hostname && allAnchors[i].hostname ===
                location.hostname) {
                var trimIndex = allAnchors[i].href.indexOf(allAnchors[i].host) +
                    allAnchors[i].host.length;
                var trimmedUrl = allAnchors[i].href.substring(trimIndex);
                allAnchors[i].setAttribute("href", trimmedUrl);
            }
        }
    }

    return {
        init: init
    };
})();

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(company.offsiteIconFix.init);

I could change it to insert "rel=external" as suggested by mgnoonan.

UpdatePanel postback changes anchor HREF to fully-qualified

2 Answers2