Call url behind first jquery tab (initialisation)

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);                        
        }
    }
});

$("#tabs ul li:gt(0) a").click(); ?

Ohgodwhy
– Ohgodwhy

2012-02-28 10:23:08 +00:00
Commented Feb 28, 2012 at 10:23 — Ohgodwhy
– Ohgodwhy, Commented Feb 28, 2012 at 10:23
@Ohgodwhy this calls a click on every li-a in the list?

Tominator
– Tominator

2012-02-28 10:28:44 +00:00
Commented Feb 28, 2012 at 10:28 — Tominator
– Tominator, Commented Feb 28, 2012 at 10:28

Didier Ghys · Accepted Answer · 2012-02-28 10:26:09Z

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:

set the defaul selection to " -1 ", so no tab is initially selected (otherwise the programmatic click has no effect)
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

edited Feb 28, 2012 at 10:26

answered Feb 28, 2012 at 10:20

Didier Ghys

30.6k9 gold badges77 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Tominator Over a year ago

Makes no difference, nothing happens :-/ Maybe there is a check "if current-selection == target-selection, do nothing"

Didier Ghys Over a year ago

I've changed the anwser a bit indeed. The plugin does not re-select a tab that is already selected (makes sense).

Tominator Over a year ago

Thanks! Maybe I should have read the docs on 'selected' too, instead of just the 'how-to' section...

Didier Ghys Over a year ago

Now you know :o) Glad it helped !

Collectives™ on Stack Overflow

Call url behind first jquery tab (initialisation)

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related