Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jquery ui tabs select doesn't seem to work in 1.10.3

The following program works in earlier releases of jQuery UI, but it does not work in the Latest release though.

The select property does not call the function in the handleSelect variable. See the following fiddle: working tabs program

Here is my code for jQuery UI 1.10.3

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tabs</title>
<link rel="stylesheet" href="css/smoothness/jquery-ui-1.10.2.custom.css">
<link rel="stylesheet" href="css/tabSelect.css">
</head>
<body>
<div id="myTabs">
    <ul>
        <li><a href="#a">Tab 1</a></li>
        <li><a href="#b">Tab 2</a></li>
    </ul>
    <div id="a">This is the content panel linked to the first tab, it is shown by default.</div>
    <div id="b">This is the content panel linked to the second tab, it is shown when its tab is clicked.</div>  
</div>
<script type="text/javascript" src="development-bundle/jquery-1.9.1.js"></script>

<script type="text/javascript" src="development-bundle/ui/jquery.ui.core.js"></script>

<script type="text/javascript" src="development-bundle/ui/jquery.ui.widget.js"></script>

<script type="text/javascript" src="development-bundle/ui/jquery.ui.tabs.js"></script>
<script type="text/javascript" src="development-bundle/ui/jquery.ui.effect.js"></script>
<script type="text/javascript" src="development-bundle/ui/jquery.ui.effect-blind.js"></script>
<script type="text/javascript">
    (function($) {
        var handleSelect = function(e, tab) {

            $("<p></p>", {
                text: "Tab at index " + tab.index + " selected",
                "class": "status-message ui-corner-all"
            }).appendTo(".ui-tabs-nav", "#myTabs").fadeOut(5000, function(){
                $(this).remove();
            });
        },
        tabOpts = {
            select : handleSelect
        };
        $("#myTabs").tabs({ select: handleSelect});
    })(jQuery);
</script>
</body>
</html>
like image 644
Laurence Avatar asked Mar 24 '23 02:03

Laurence


1 Answers

See the upgrade guide for jQuery UI 1.10

Removed select event; use beforeActivate

(#7154) The select event has been removed in favor of beforeActivate. See the 1.9 deprecation notice for full details.

Here is a jsfiddle

Replaced

$("#myTabs").tabs({ select: handleSelect});

with

$("#myTabs").tabs({ beforeActivate: handleSelect});

EDIT

Just noticed that your indexes won't work with 1.10 either. Updated my fiddle! See the docu.

var handleSelect = function(e, tab) {

    $("<p></p>", {
        //this is new
        text: "Tab at index " + tab.newTab.index() + " selected",
        "class": "status-message ui-corner-all"
        }).appendTo(".ui-tabs-nav", "#myTabs").fadeOut(5000, function(){
            $(this).remove();
        });
}
like image 169
SirDerpington Avatar answered Mar 31 '23 11:03

SirDerpington