Numbers of an ordered list turn into 0 while clicking through jquery tabs

Question

I have a page with jQuery tabs on it. In those tabs is an ordered list.

This is my html code:

<div id="tabs">

  <ul>
      <li><a href="#tabs-1">Nunc tincidunt</a></li>
      <li><a href="#tabs-2">Proin dolor</a></li>
      <li><a href="#tabs-3">Aenean lacinia</a></li>
  </ul>

  <div id="tabs-1">
      <ol start="50">
          <li>Bibendum Elit</li>
          <li>Vehicula</li>
          <li>Amet Bibendum Ultricies</li>        
      </ol>
  </div>

  <div id="tabs-2">
      <ol>
          <li>Sollicitudin Cras Vehicula</li>
          <li>Vulputate Euismod</li>
          <li>Ridiculus Vehicula Pharetra Nullam</li>        
      </ol> 
  </div>

  <div id="tabs-3">
      <ol>
          <li>Ullamcorper Parturient</li>
          <li>Tristique Mollis Venenatis Vehicula</li>
          <li>Vulputate Bibendum</li>        
      </ol>  
  </div>
</div>

and this is my javascript:

$(function() { $( "#tabs" ).tabs(); });

See: http://jsfiddle.net/2ewzz/1/

When i view this in IE9, and i click from the first tab to the second tab and then back to the first tab again, the numbers are all changed to "0"

Does anyone know what i'm doing wrong, or how to solve this problem?

`ol` tag `start` attribute was deprecated in HTML 4.01. In HTML5 it is supported. Try with IE9 compatibility mode and see if it works. — Aleksandr M, Jan 25 '13 at 11:14
Check this bug report in jQuery : http://bugs.jqueryui.com/ticket/8021 it seems to be an issue with IE9. — koopajah, Jan 25 '13 at 11:15
@Aleksandr M: It has'nt got anything to do with the "start" attribute, try navigating from tab-3 to tab-2 — JimSteinhart, Jan 25 '13 at 11:28
@JimSteinhart: Hmm... Yep `start` is not guilty in that case. :) But it works for me in compatibility view mode. — Aleksandr M, Jan 25 '13 at 11:33

score 3 · Accepted Answer · edited May 23 '17 at 10:32

This seems to be an issue in IE itself looking at this related question.

I was able to get this fixed by recreating the counter on the list items when selecting the tab once again.

$(function() {
    $( "#tabs" ).tabs({
        select: function(event, ui){
            var ol = $($(ui.panel).children()[0]);
            setTimeout(function(){
            ol.children().css("counter-reset", "item")
            }, 1);
        }
    });
});

Check out this jsFiddle for a working example

score 0 · Answer 2 · answered Jan 29 '13 at 08:15

0

http://www.w3schools.com/tags/att_ol_start.asp It works with IE9 Compat mode.

answered Jan 29 '13 at 08:15

aditya

333
1
6
11

the 'start' attribute is not the problem here, and yes it works in compatibility view, as Aleksander M already mentioned. – JimSteinhart Jan 29 '13 at 14:25
@JimSteinhart, Then what is the problem if not start attribute? – aditya Feb 06 '13 at 08:25
@Aditya: When i view this in IE9, and i click from the second tab to the third tab and then back to the second tab again, the numbers are all changed to "0" – JimSteinhart Feb 06 '13 at 10:20
So according to me that is happening because IE9 is not supporting/handling the start attribute correctly. Btw, if you can tell us the reason as why you need to start it from a number like that, we may also think about a different approach altogether. – aditya Feb 07 '13 at 08:34

score 0 · Answer 3 · answered Aug 01 '13 at 18:51

Based on @sriniris answer, if you have multiple lists:

<script type="text/javascript">
    $(function () {
        $("#tabs").tabs({
            activate: function (event, ui) {
                $(".olReset").each(function () {
                    var ol = $(this);
                    setTimeout(function () {
                        ol.children().css("counter-reset", "item")
                    }, 1);
                });
            }
        });
    });
</script>

Just apply .olReset class to your lists.

Also, select has been depreciated.

score 0 · Answer 4 · answered Mar 04 '14 at 17:26

0

I had this problem too but through a coincidence my IT department deployed this patch http://support.microsoft.com/kb/2909921 (Updates IE9 to update version 9.0.24 )and the problem went away

answered Mar 04 '14 at 17:26

Cynical Geek

31
7

Numbers of an ordered list turn into 0 while clicking through jquery tabs

4 Answers4