Есть ли способ обойти эту проблему с помощью упорядоченных списков и панелей обновления в IE9? - PullRequest
Новая
       4

Есть ли способ обойти эту проблему с помощью упорядоченных списков и панелей обновления в IE9?

5 голосов
/ 08 декабря 2011

Я обнаружил досадную проблему с упорядоченными списками в IE9, и мне интересно, есть ли способ исправить это, не меняя упорядоченный список на что-то другое или не избавившись от поведения панели обновления.

Симптомы состоят в том, что, если упорядоченный список (или элемент управления BulletedList) используется на панели обновлений, инициализация обратной передачи, по-видимому, заставляет номера маркеров отображать 0, 0, 0 вместо 1, 2, 3.

Проблема легко воспроизводится с помощью следующего кода: 

    <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>

(просто скопируйте это на пустой сайт ASP.NET и нажмите Отладка)

Это похоже на проблемы, которые я видел до , связанные с CSS, но здесь CSS не задействован.

Есть ли способ обойти эту проблему, или я должен рассмотреть другой элемент управления (например, Повторитель)?

Я еще не проверял это на IE8 или ниже. Однако, если я изменю режим рендеринга IE9 (с помощью инструментов разработчика F12), я получу следующие результаты:

Режим браузера

  • Одинаковые результаты для каждого режима документа (см. Далее)

Режим документа

  • Причудливый режим: отлично работает
  • Стандарты IE7: отлично работает
  • Стандарты IE8: перерывы
  • Стандарты IE9: перерывы

РЕДАКТИРОВАТЬ: Это, кажется, специфично для IE. Мне не удалось воспроизвести эту проблему в Google Chrome 15, FireFox 8 или Opera 11.52.

1 Ответ

3 голосов
/ 08 декабря 2011

Это действительно очень забавно, но эту ошибку можно исправить (барабанная дробь), заменив каждый элемент списка в упорядоченных списках, возвращаемых запросом ajax, его клоном.

Существует два возможных решения: первое с простым javascript и второе с 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>
...