Monday, April 30, 2012

jQuery UI Tabs "Select" Event Being Overridden by "Click" Event -- Uncaught TypeError

I'm having some trouble selecting a tab programmatically. My tabs are loading inside a Fancybox dialog window, which is launched on click of a link. Basically, I want to perform certain actions any time a tab is selected, and also select a specific tab when a link is clicked.

I am initializing jQuery UI Tabs with the select event like so:


select: function(event, ui) {

// grab value of a form input
var text = $(someElement).val();

// check its length
if ( text.length > 0 ) {
// do stuff

Later on in my JS file I have the following:

$(document).on('click', 'a.edit', function() {
if($category == 'book') {
// load the tab specific to the 'book' category
$('#tabs').tabs({ selected: 3 });

When I click the a.edit link for an item in the "book" category, my console throws this error:

Uncaught TypeError: Cannot read property 'length' of undefined

Then, instead of the tabs loading in the Fancybox, nothing happens. This error is not thrown when I click the link for items that are not in the book category. Thus, two things are painfully evident:

  1. I am a n00b

  2. My select event is apparently getting overridden by the click event, so text is not set

I've tried setting a default for text at the top of my JS file but that doesn't work. My question, then, is:

What is the correct way to initialize UI Tabs with a select event, while also being able to programmatically select a tab with a click event?

Or, more concisely,

Why am I getting that damn error?

No comments:

Post a Comment