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?

Baboon

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. – Dominus

Check this bug report in jQuery : bugs.jqueryui.com/ticket/8021 it seems to be an issue with IE9. – Sanatorium

@Aleksandr M: It has'nt got anything to do with the "start" attribute, try navigating from tab-3 to tab-2 – Baboon

@JimSteinhart: Hmm... Yep start is not guilty in that case. :) But it works for me in compatibility view mode. – Dominus

Answer 1

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

Selmore

Answer 2

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

Rundell

the 'start' attribute is not the problem here, and yes it works in compatibility view, as Aleksander M already mentioned. – Baboon

@JimSteinhart, Then what is the problem if not start attribute? – Rundell

@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" – Baboon

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. – Rundell

Answer 3

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.

Cathrinecathryn

Answer 4

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

Brunson