jQuery UI can't get selected tab outside of event function

Question

I have the following HTML which I have applied Jquery tabs to:

<div id="lineitems">

  <ul>
    <li><a href="#not-issued" onClick="displayItems()">Not Issued</a></li>
    <li><a href="#issued" onClick="displayItems()">Issued</a></li>
    <li><a href="#search" onClick="displayItems()">Search</a></li>
  </ul>

<div id="not-issued">Not Issued Items</div>
<div id="issued">Issued Items</div>
<div id="search">Search for items</div>

</div>

I have the following jQuery function which does what it's supposed to, it will return "issued" when you click on the issued tab etc.

$("#lineitems").tabs({
  beforeActivate: function (event, ui) {
    var issued = ui.newPanel.attr('id'); //Get newly selected tab
    alert(issued);
  }
});

alert(issued);

The first alert correctly returns "issued" or whatever tab is selected, however the second alert returns [object htmldivelement]. I'm not sure why it isn't returning the same value. What am I doing wrong?

To put it into context, I'm trying to get the value of the selected tab so I can change the value of the submit button accordingly and then pass the value (of the selected tab) to an ajax function.

I have also tried using:

$("#lineitems").bind("tabsactivate", function(event, ui) {
    issued = ui.newTab.index();
    alert(issued);
});

But again I run into the same problem that the issued variable returns empty outside of the function.

EDIT: Using Bhushan Kawadkar's answer I got it working, I also had to change issued to a string using toString() to pass it to the Ajax function correctly.

I also followed T J's suggestion and removed the onClick event from my links as they're not needed, as the function is called every time a new tab is clicked anyway.

possible duplicate of [jQuery UI Tabs Get Currently Selected Tab Index](http://stackoverflow.com/questions/300078/jquery-ui-tabs-get-currently-selected-tab-index) — Control Freak, Sep 24 '14 at 10:11
I did try the suggestions on that question, and I get the same problem, still can't access the variable outside the function — Harry12345, Sep 24 '14 at 10:20

Bhushan Kawadkar · Accepted Answer · 2014-09-24T11:42:44.757

2

You have to declare variable outside function to use it outside, see below code

var issued = '';

$("#lineitems").tabs({
  beforeActivate: function (event, ui) {
    issued = ui.newPanel.attr('id'); //Get newly selected tab
    alert(issued);
  }
});

alert(issued);

Edit - You are binding tabs and bind multiple time inside displayItems() function. Instead of this, you can bind it once inside document.ready or $(function(){ ..});. To pass issued value to displayItems function, call it inside tabs beforeActivate event.

jQuery :

$(function() { //This is in the <head> tag on my HTML
    $( "#lineitems" ).tabs();

    //Both of these methods work, but only inside the function
    $("#lineitems").bind("tabsactivate", function(event, ui) {
        var issued = ui.newTab.index();
        alert("bind "+issued);
    }); 

    $("#lineitems").tabs({
      beforeActivate: function (event, ui) {
        var issued = ui.newPanel.attr('id'); //Get newly selected tab
        alert("tabs "+issued);
        displayItems(issued);
      }
    });
});

function displayItems(issued)
{
    alert("display "+issued);
    //lineItems(job, issued); call to Ajax function
}

And remove onclick="displayItems()" from anchor tags.

Demo

edited Sep 24 '14 at 11:42

answered Sep 24 '14 at 10:11

Bhushan Kawadkar

28,279
5
35
57

when are you showing second alert? is this on load of page? – Bhushan Kawadkar Sep 24 '14 at 10:31
I'm showing it whenever the user selects a new tab, I call the function onClick of each tab – Harry12345 Sep 24 '14 at 10:34
can you post a jsfiddle link? – Bhushan Kawadkar Sep 24 '14 at 10:35
Here is a JSfiddle link [jSfiddle](http://jsfiddle.net/abt0tdbs/). For some reason the `alert` isn't working, but you get the idea – Harry12345 Sep 24 '14 at 10:44
*"call it inside tabs event"*? what tabs event..? – T J Sep 24 '14 at 11:41
I meant tabs beforeActivate event – Bhushan Kawadkar Sep 24 '14 at 11:42

T J · Answer 2 · 2014-09-24T11:42:02.120

The reason why you ca't access the value outside is because you're storing it in a local variable.
The reason why your fiddle is not working is becuase
- The fiddle is set to run onload so the displayItems will be wrapped inside a load event handler hence won't be accessible outside
- The following var job = document.getElementById('joblist').value; throws error becuase there is no elment with id joblist.

Ideally your code should be:

$("#lineitems").tabs({
    beforeActivate: function (event, ui) {
    },
    activate: function (event, ui) {
        issued = ui.newTab.index(); // issued is global so you can access it outside
        alert(issued);
    }
});

<link href="http://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>

<div id="lineitems">
    <ul>
        <li><a href="#not-issued">Not Issued</a>

        </li>
        <li><a href="#issued">Issued</a>

        </li>
        <li><a href="#search">Search</a>

        </li>
    </ul>
    <div id="not-issued">Not Issued Items</div>
    <div id="issued">Issued Items</div>
    <div id="search">Search for items</div>
</div>

jQuery UI can't get selected tab outside of event function

2 Answers2