Is there a way to work around this issue with ordered lists and update panels in IE9?

Question

I have discovered an annoying issue with ordered lists in IE9 and am wondering if there's a way to fix it without changing the ordered list into something else or getting rid of the update panel behaviour.

The symptoms are that, if an ordered list (or BulletedList control) is used within an update panel, initialising a postback seems to cause the bullet numbers to display 0, 0, 0, instead of 1, 2, 3.

The problem is easily reproducible via the following code:

    <asp:ScriptManager ID="sm1" runat="server" />
    <asp:UpdatePanel ID="upTest" runat="server">
        <ContentTemplate>
            <ol>
                <li>Item 1</li>
                <li>Item 2</li>
                <li>Item 3</li>
            </ol>
            <asp:Button ID="btnWhatever" runat="server" 
                Text="Click me to see IE break the list..." />
        </ContentTemplate>
    </asp:UpdatePanel>

(Just copy that into a blank ASP.NET website and hit Debug)

This is similar to problems I've seen before to do with CSS, but there's no CSS involved here.

Is there a way around this issue, or do I have to consider a different control (e.g. a Repeater)?

I haven't tested this on IE8 or below yet. However, if I change the rendering mode of IE9 (via the F12 Developers Tools), I get the following results:

Browser Mode

• Same results for each Document Mode (see next)

Document Mode

• Quirks Mode: Works fine
• IE7 Standards: Works fine
• IE8 Standards: Breaks
• IE9 Standards: Breaks

EDIT: This does seem to be specific to IE. I have not been able to reproduce this issue on Google Chrome 15, FireFox 8 or Opera 11.52.

Answer 1

It's really very funny but this bug may be fixed (drum roll) with replacing each list item in ordered lists returned by ajax request with it's clone.

There are two possible solutions: first one with plain javascript and second one with jQuery:

<script type="text/javascript">
     Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoaded);

     function pageLoaded(sender, args) {
          if (args._panelsUpdated.length > 0) {

               // Plain javascript fix
               for (var panelIndex = 0; panelIndex < args._panelsUpdated.length; panelIndex++) {
                    var panel = args._panelsUpdated[panelIndex];
                    var orderedLists = panel.getElementsByTagName("ol");
                    for (var listIndex = 0; listIndex < orderedLists.length; listIndex++) {
                         var list = orderedLists[listIndex];
                         var listItems = list.getElementsByTagName("li");
                         for (var itemindex = 0; itemindex < listItems.length; itemindex++) {
                              var listItem = listItems[itemindex];
                              list.replaceChild(listItem.cloneNode(true), listItem);
                         }
                    }
               }

               // jQuery fix - bit less code
               $(args._panelsUpdated).find("ol>li").each(function () {
                    $(this).replaceWith($(this).clone(true, true));
               });
          }
     }
</script>