How to get tab titles in jquery-ui 10.4

Question

Try as I might I cannot seem to get the Tab Title in Jquery ui 10.4. I would like to add it as .data so I can send it to a Dialog window. I am already doing this with the Tab ID but I can't seem to figure it out with title. Here's what I have for ID.

$( "#add_item_opener" ).click(function() {

$( "#add_item_dialog" )
.data('curtab', $('#tabs').tabs('option','active')).dialog( 'open' );

  });
});

Everything I find using Google seems to only work if you have an older version of JQuery.

Am I missing something?

EDIT:

I guess I should have been more thorough. You got me part of what I needed which was to get the Tab Title but I still can't seem to make it work. I'm basically sending the Tab ID and Tab Title to the dialog window so I can populate some HTML Input elements. So far I was able to Open the window and populate a text box with the ID. Now I want to populate another text box in the same window with the Title. Here is my entire opening dialog code.

I have a button on the page with id='add_item_opener' that is working great. I think my biggest issue is how to send multiple variables with .data().

<!--Open add item dialog box-->
<script>
  $(function() {
    $( "#add_item_dialog" ).dialog({
      height: 550,
      width: 400,
      autoOpen: false,
      create: function() {
           $('#curjobNum').val('154');
        },
      open : function (event, ui) {
           var curTab = $('#add_item_dialog').data('curtab');
           $('#curtabNum').val(curTab);
          },
      buttons: {
    },
      position: {
        my: "center top",
        at: "center top",
        of: "#tabs"
      },
      show: {
        effect: "blind",
        duration: 1000
      },
      hide: {
        effect: "clip",
        duration: 1000
      }

    });

$( "#add_item_opener" ).click(function() {

    $( "#add_item_dialog" )
    .data('curtab', $('#tabs').tabs('option','active')).dialog( 'open' );

    });
  });
  </script>

Here's my dialog windows:

<td><button id='add_item_opener'>Add a New Bid Item</button>
<div id='add_item_dialog' title = 'Bid Item Form' style = 'background-color: #ccc;'>
<br><br>
<form method='POST' action='' id='newBidItem'>
<table class='small' style = 'background-color: #ccc;'>
    <tr><td>Tab/Title</td><td><input type='text' id='title' value='' readonly='readonly' /></td>
    <tr><td>Company Name</td><td><input type='text' name='company' style='width: 150px;' value='' /></td>
    <tr><td>Qty</td><td><input type='text' name='qty' style='width: 35px;' value=''  /></td> 
    <tr><td>Description</td><td><textarea name='descript' cols='35' rows='5' ></textarea></td> 
    <tr><td>Material Spec</td><td><input type='text' name='materialSpec' value='' /></td>
    <tr><td>Delivery</td><td><input type='text' name='delivery' value='' class='date-pick' /></td>
    <tr><td>Unit Cost</td><td><input type='text' name='unit_cost' value=''  /></td> 
    <tr><td>Discount % (if any)</td><td><input type='text' name='discount' value=''  /></td>
</table>
    <input type='hidden' value='' id='curtabNum' name='curtabNum' />
    <input type='hidden' value='' id='curjobNum' name='curjobNum' />
    <tr><td><input type='submit' value='Save' name='saveBidItem' id='saveBidItem' /></td>

</form>
</div>

Thanks for all the help as I'm a serious JQuery noob.

Answer 1

Do you have 2 questions in your post? I will answer for this one:

How to get selected tab title?

Firstly, look this example: jsFiddle

Is it what you want to achieve? Select some tab and press click me link. Alert with selected tab name will be shown.

Java script code:

var selected = $("#tabs").tabs("option", "active");
var selectedTabTitle = $($("#tabs li")[selected]).text();
alert(selectedTabTitle);

It is very simple. Tell me, if you need comments.

Source

Note, that if you use jQuery <= 1.8 you have to use tabs("option", "selected");, but if you use jQuery > 1.8 you have to use tabs("option", "active"); (source)

If you have question how to open dialog, create new post for it.