CODEWITHSUNDEEP
javascriptjqueryhtmljquery-uijquery-ui-tabs
Harry12345
Harry12345

Reputation: 1160

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

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.

Upvotes: 0

Views: 1508

Answers (2)

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28513

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

Upvotes: 2

T J
T J

Reputation: 43156

  • 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>

Upvotes: 1

Related Questions