Question

I have the following code which should be getting the text from a span within the selected jQuery tab, but it always seems to be one click behind. i.e. if I click tab1, it shows nothing, if I click tab2, it shows the text from the span which was within tab1. tab3 will show tab2’s span and so on.

Not sure what I have done wrong, but here is the code I currently have:

jQuery:

$('[id^="tab"]').live('click', function() {
    alert($("li.ui-tabs-selected span").text())
});

HTML:

<li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active" id="tab_group_44">
    <a href="#ui-tabs-2">
        <span>span content 1</span>
    </a>
</li>

<li class="ui-state-default ui-corner-top" id="tab_group_48">
    <a href="#ui-tabs-4">
        <span>span content 2</span>
    </a>
</li>

<li class="ui-state-default ui-corner-top" id="tab_pg_1">
    <a href="#ui-tabs-6">
        <span>span content 3</span>
    </a>
</li>

Tab code:

$("#tabs").tabs({
    cache: true,
    ajaxOptions: {
        success: function(){
            $(".column").sortable({
                connectWith: '.column',
                start: function(e, ui){
                    ui.placeholder.height(ui.item.height());
                },
                revert: true,
                opacity: 0.7,
                forcePlaceholderSize: false,
                tolerance: 'pointer',
                handle: '.btnWidgetDarkMove, .btnWidgetLightMove, .btnWidgetBrightMove, .btnWidgetGrayMove, .btnWidgetOtherMove',
                update: function(event, ui) {
                    var that = this;
                    var column = $(this).closest("div").attr("class").split(" ");

                    if( $(that).closest("div").attr("id") !== "column_4" ) {

                        $.ajax({
                            url: '/ajax/save_homepage_widget_order.aspx',
                            type: 'POST',
                            data: { strTab:$("li.ui-tabs-selected").attr("id"), strColumn:column[1], strItems:$(that).sortable('serialize', {key: 'item', attribute: 'class', expression: /(\d+)/}) },
                            error: function(xhr, status, error) {
                                //console.log(xhr.responseText);
                            },
                            success: function() {
                                //should use a return value here to make sure move has been saved
                            }
                        });

                    }

                }
            });


        }
    }
});

Answer 1

The tab select is probably occurring after your click event, resulting in your experienced behavior. Depending on how you set up the tabs, you may want to use the tab select event:

$( '[id^="tab"]' ).bind( "tabsselect", function(event, ui) {
  alert($("li.ui-tabs-selected span").text());
});

You can also try initializing the select function when you create the tabs:

...
cache: true,
select: function(event, ui) { 
    alert($("li.ui-tabs-selected span").text());
}

Update:
The issue you are experiencing may be stemming from the fact that the jquery class is not being set correctly. Instead try to access the selected tab directly:

var selected = $( "#tabs" ).tabs( "option", "selected" ).children('span');
alert(selected.text());