jquery, access page tab "with ajax content" via external hyperlink?

Question

Im having trouble to open a page displaying a specific jquery tab that loads its content via ajax.

The problem is that jquery-ui opens tabs called by external links using the anchor hashtag but a ajax content tab anchor doesn't has one.

Any ideas

Thanks in advance.

Basicaly the same code in the jquery-ui demos
What i want is to have a link in my homepage that will open this other page already displaying tabX

$(document).ready(function() {
    $(function() {
        $( "#tabs" ).tabs({
            ajaxOptions: {
                        error: function( xhr, status, index, anchor ) {
                            $( anchor.hash ).html(
                                "Couldn't load this tab. We'll try to fix this as soon as possible. " +
                                "If this wouldn't be a demo." );
                        }
            }
        });
    });
});



<div id="tabs">
    <ul>
        <li class="tab first_tab"><a id="tab1" href="tab1.html">dit doen we</a></li>
        <li class="tab"><a id="tab2" href="tab2.html">disciplines</a></li>
        <li class="tab"><a id="tab3" href="tab3.html">cases</a></li>
        <li class="tab"><a id="tab4" href="tab4.html">uitgelicht</a></li>
    </ul>
</div>

do you mean you want to have a link that opens a tab that loads its content via AJAX? — William Niu
– William Niu, Commented Sep 30, 2011 at 22:15
Do you mean the link is on another page, or do you mean the content to be loaded is another page? — William Niu
– William Niu, Commented Sep 30, 2011 at 22:35
:D the link(Last poject) is in my homepage, this link should take me to another page(our work page) that has a tab called Last Project. and this tab content is loaded via ajax. thanks :P — theRolk
– theRolk, Commented Sep 30, 2011 at 22:48

Community · Accepted Answer · 2017-05-23 11:47:52Z

1

To select a tab, you can use the select method on .tabs(), e.g. $('#tabs').tabs('select', 1) would select the 2nd tab (with a tab index of 1).

To open a page and tells it to select a tab, you will need to "pass the intention" somehow. If you're using AJAX for the page transition, then you can simply load the page and call .tabs('select', tabIndex).

If you load the 2nd page without AJAX, you can pass in a variable with the querystring, e.g. ?loadTab=1 and parse for it in the page being loaded. location.search will give you the querystring. This question will help you parse it.

So, on the 2nd page, you would have something like this:

$(function() {
    $("#tabs").tabs({
        ...
    });

    // code to parse the loadTab variable in the querystring

    if (typeof(loadTab) !== 'undefined' && parseInt(loadTab) !== 'NaN')
        $('#tabs').tabs('select', parseInt(loadTab));
}

edited May 23, 2017 at 11:47

CommunityBot

11 silver badge

answered Sep 30, 2011 at 23:06

William Niu

15.9k8 gold badges58 silver badges93 bronze badges

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

Collectives™ on Stack Overflow

jquery, access page tab "with ajax content" via external hyperlink?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related