jQuery and split not working together?

Question

Good Day,

I'm playing around with jQuery tabs and have a prototype up and running.

http://www.omnicom-innovations.com/play/tabsdemo.html

Here is my code:

$(document).ready(function() {
    $("#tabs").tabs();

  // Select the second tab
  // $("#tabs").tabs({ selected: 1 });

  // http://viralpatel.net/blogs/2009/04/jquery-tabs-create-html-tabs-using-jquery-ui.html
  $('#tabs').bind('tabsselect', function(event, ui) {

    // Objects available in the function context:
    // alert(ui.tab);     // anchor element of the selected (clicked) tab
    var tabPageName = ui.tab;
    alert('Tab Name: ' + tabPageName);

    // var results = tabPageName.substring(tabPageName.IndexOf("#") + 1);
    // alert('Page Name: ' + results);

    var arrData = tabPageName.split("#");
    alert(arrData[1]);

    // alert(ui.panel);   // element, that contains the selected/clicked tab contents
    alert(ui.index);   // zero-based index of the selected (clicked) tab

  });

});

I am trying to extract the name of the tab: (#fragment-1, etc...) in the anchor tag. I am trying to use the split method (and IndexOf method as an alternative).

<div id="tabs">
    <ul>
    <li><a href="#fragment-1"><span>One</span></a></li>
    <li><a href="#fragment-2"><span>Two</span></a></li>
    <li><a href="#fragment-3"><span>Three</span></a></li>
    </ul>
    <div id="fragment-1">
    <p>First tab is active by default:</p>
    <pre><code>$('#example').tabs();</code></pre>
    </div>
    <div id="fragment-2">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    </div>
    <div id="fragment-3">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    </div>
</div>

As you can see, I had to comment out the split() method because I'm receiving the following error:

Uncaught TypeError: Object http://www.omnicom-innovations.com/play/tabsdemo.html#fragment-3 has no method 'split'

but I know that the split method works in JavaScript. Does anyone see what I could be missing?

TIA,

coson

Answer 1

You need to convert the page name to a string explicitly:

// DON'T USE THIS - this is a quick & dirty solution, see below for real solution
// choose one - the one you really need
var arrData = tabPageName.toString().split("#")
var results = tabPageName.toString().substring(tabPageName.IndexOf("#") + 1);

The conversion happens automatically when using alert, but not when you try to split the page name. The best way to write this section would be:

var tabPageName = ui.tab.toString();
// choose one - the one you really need
var arrData = tabPageName.split("#")
var results = tabPageName.substring(tabPageName.IndexOf("#") + 1);

This is because what you stored in your tabPageName variable is not actually the page name - it's the tab itself, which returns its name when alerted.