jQuery UI Tabs - Activate event not returning `ui` in IE10 and lower

Question

I am utilizing jQuery UI's Tabs widget on a page. Using the documented activate event , there should be two objects usable inside the function, event and ui . In Chrome, Firefox, Safari, and Internet Explorer 11, the ui object is full. However, in IE10 and lower, the object is mostly blank. There are data attributes on my panels that are used to activate specific content in each tab that I need to access via the ui object, but these all fail in IE10 and lower.

Consider the following code:

<script>
$(document).ready(function() {
    $('#community-areas').tabs({
        activate: function(event, ui) {
            console.log(ui.newPanel[0].dataset.latitude);
            console.log(ui.newPanel[0].dataset.longitude);
        }
    });
});
</script>

<div id="community-areas">
    <ul>
        <li><a href="#tab-1">Tab 1</a></li>
        <li><a href="#tab-2">Tab 2</a></li>
    </ul>
    <div id="tab-1" data-communityid="water" data-latitude="29.266" data-longitude="-81.1379"></div>
    <div id="tab-2" data-communityid="break" data-latitude="29.0516" data-longitude="-81.029"></div>
</div>

In Chrome, Firefox, Safari, and IE11, this code will succesfully log the latitude and longitude. However, in IE10 and below, the follow error shows up in the console:

SCRIPT5007: Unable to get property 'latitude' of undefined or null reference

Adding a console.log(JSON.stringify(ui)); for IE (since IE doesn't allow you to traverse an object in the console), it outputs:

{"oldTab":{"0":{},"length":1,"prevObject":{"0":{},"1":{},"2":{},"3":{},"4":{},"length":5,"prevObject":{"0":{},"length":1,"prevObject":{"0":{},"length":1,"prevObject":{"0":{},"context":{},"length":1},"context":{},"selector":"ol,ul"},"context":{}},"context":{},"selector":"> li:has(a[href])"},"context":{}},"oldPanel":{"length":0,"prevObject":{"0":{},"context":{},"length":1},"context":{},"selector":"#tab-2"},"newTab":{"0":{},"length":1,"prevObject":{"0":{},"context":{},"length":1},"context":{}},"newPanel":{"0":{},"length":1,"prevObject":{"0":{},"context":{},"length":1},"context":{},"selector":"#tab-1"}}

Has anyone seen this behavior and know how to work around it?

I apologize if there is another question similar to this. Google searches with "ui" in them obscured the results since "ui" is in "jQuery UI".

Answer 1

The dataset property is supported only from IE >= 11, for older version support use jQuery data instead.

Ref: http://caniuse.com/dataset

Code:

$(document).ready(function () {
    $('#community-areas').tabs({
        activate: function (event, ui) {
            console.log($(ui.newPanel[0]).data('latitude'));
            console.log($(ui.newPanel[0]).data('longitude'));
        }
    });
});

Demo: http://jsfiddle.net/IrvinDominin/Xzm8K/1/