Question

I have a jquery tab on my page, where each list item contains a hyperlink that should get called whenever someone changes tab (it’s a webservice call that fills in values within the tab).

I can accomplish this behaviour when changing tabs, but now I also want the first hyperlink to be called when the .tabs function is called (for initialisation purposes)

How can I do this? Calling this at the end of the page doesn’t work:

setTimeout(function() {$('#tabs').tabs('select', 0);}, 0);

Probably because just calling .tabs() already selects the first tab.

My tabs code (js + asp.net):

<div id="tabs" class="tab-panel">
    <ul class="tabs">
        <asp:Repeater ID="rpt" runat="server">                
            <ItemTemplate>
                <li>
                    <asp:HyperLink ID="btnEdit" runat="server" NavigateUrl="myPage.aspx/GetInfo" Text='<%# Eval("Name") %>'></asp:HyperLink>
                    <asp:HiddenField ID="txtId" runat="server" Value='<%# Eval("ID") %>' />
                </li>
            </ItemTemplate>
        </asp:Repeater>
    </ul>
    <div class="tab rounded-bottom rounded-topright">
        <div class="tab-content" id="licRights">
            <input type="text" value="" id="myText">
        </div>
    </div>
</div>

Javascript:

$("#tabs").tabs({
    select: function (event, ui) {
        var Id = $(ui.tab).siblings("input").val();
        var settings = $(this).tabs("option", "ajaxOptions");
        settings.data = $.toJSON({ id: Id });
    },
    ajaxOptions: {
        success: function (response) {
            $("#myText").val(response.d);                        
        }
    }
});

Answer 1

The select event is triggerred when a tab is clicked, not programmatically changed. That is what the documentation says actually.

select
This event is triggered when clicking a tab.

You can see this in action here: only the “show” event is triggerred initially

---

What you can do is trigger a click on the first tab:

1. set the defaul selection to ” -1 “, so no tab is initially selected (otherwise the programmatic click has no effect)
2. find the first anchor and trigger a click event

Here’s the code:

$("#tabs").tabs({
    selected: -1,
    ...
}).find('.ui-tabs-nav a:first').click()

DEMO