CODEWITHSUNDEEP
jqueryhtmlajax
Sonnenhut
Sonnenhut

Reputation: 4463

Making CSS Tabs with jQuery and ajax

as mentioned above I tried to make Ajax Tabs with the provided jQuery .ajax() function.

That works all very well, my problem is only that the value in the href attribute from the anchor is in the url and i dont know how to call my ajax function with the #tabname in the url. (my intention is, that if somebody stores the link of the site, he comes back to right that tab and not to the first tab ).

And I'm sorry no I don't want to use jQuery-UI because if i would use it, it would be only for that one problem and I think thats not worth it.

For understanding:

my tab(or anchor) is something like: <a id="main" href='#main'>Mainpage</a>

my jquery looks like following:

$('#main').click(function(){
            loadtab("main.php");
        });

        function loadTab(pageUrl) 
        {
            //load the content into #tabcontent
            $.ajax( 
            { 
                url: pageUrl, 
                cache: false, 
                success: function(message) 
                {
                    $('#tabcontent').empty().append(message).hide().fadeIn('slow');
                } 
            });

EDIT:

if somebody likes the loadTab method, here is a link from were i have taken it from (not mine) http://jetlogs.org/2008/03/17/jquery-ajax-tabs/

EDIT 2:

ok, i solved it like this:

    //click the first tab, so that there will be shown anything
    //tabs is an array of my link ids
    $('#'+tabs[0]).click();

    //if there is a given hash, click the matching
    if(window.location.hash+"" != ""){

        var hash = window.location.hash.substr(1)+'';
        if(jQuery.inArray(hash, tabs)){
            $('#'+hash).click();
        }
    }

Upvotes: 0

Views: 404

Answers (1)

lorefnon
lorefnon

Reputation: 13115

For directing the user to a particular tab based on the hashtag he has used in the url entered , you have to use a client side routing solution. Calling $.ajax with some special parameter, as you are probably guessing does not solve this requirement. I recommend you look at https://github.com/mtrpcic/pathjs . This is a jquery based routing solution, which effectively maps particular hashtags in urls to particular functions. This tutorial : http://stjhimy.com/posts/22-riding-the-hash-bang-with-pathjs-and-ajax-easy-twitter-like-urls might be helpful in demonstrating the use of javascript routing.

Upvotes: 1

Related Questions