CODEWITHSUNDEEP
javascriptjqueryjquery-ui
ITWorker
ITWorker

Reputation: 995

Capturing focus on a specific jQueryUI tab

I have jQueryUI tabs, and on a specific tab, I have defined a click function (the ajax call works correctly):

$("a[href='#tabs-1ua']").click(function (event, ui)
{

     //ajax call

});

Now what I am trying to do is to accomodate not just clicks, but any type of focus on this tab in general, such as navigating to it using a keyboard arrow key for example. I tried activate in place of click, but I got an error. How can I capture all types of focus on a specific jQueryUI tab?

Thank you.

Upvotes: 0

Views: 306

Answers (5)

BobRodes
BobRodes

Reputation: 6165

You do need to use the focus event for key movement, and can use it for mouse clicks as well. The focus event and related events are notoriously quirky in their behaviors, especially with respect to how they are implemented in frameworks and plugins. While I can't say just why, focus on the a element fires on a mouse click, and focus on the enclosing li element fires when you navigate to the element with keys. (Tested with Chrome.) So:

$("#myTabs").tabs();
$('#myTabs li, #myTabs a').on('focus', function(e, ui){
    //do whatever
});

Demo

Upvotes: 0

ITWorker
ITWorker

Reputation: 995

I got it working as follows:

I initialized tabs in my application using the class attribute instead of an id, and within it is specified the activate option. In there, I got the id of the currently active tab using $(".tabui .ui-tabs-panel:visible").attr("id"); where tabui is the name of the class. The code is below.

$('.tabui').tabs({

    activate: function (event, ui)
    {

       //do something 1

        var currentTab = $(".tabui .ui-tabs-panel:visible").attr("id");

        console.log (currentTab);

        if(currentTab ===  "#tabs-1ua")
        {
             //do something 2
        }


    }
});

Thanks to all who replied trying to help me.

Upvotes: 0

Rahul Patel
Rahul Patel

Reputation: 5246

You should set "tabsactivate" listener while the tab has been activated. Please check below code.

//tabs is the id of UL in which all the tabs has been wrapped. Please replace it with according to your code.

$('#tabs').tabs({
    activate: function(event ,ui){  
        if(ui.newTab.attr('href')=='#tabs-1ua'){
            //make ajax call
        }
});

Upvotes: 2

lIP TT
lIP TT

Reputation: 77

Try 

$("a[href='#tabs-1ua']").on('click hover', function () {
// Do something for both
});

Upvotes: 0

The One and Only ChemistryBlob
The One and Only ChemistryBlob

Reputation: 7884

focus() by default is accepted by input elements (<input>, <textarea>, <select>) and not <a> elements. Try adding a tab index to the anchor first:

$(document).ready(function () {

    $("a[href='#tabs-1ua']").attr("tabindex", "-1").focus(function 
    (event, ui) {
        // JS goes here
    });

});

Upvotes: 0

Related Questions