Optimizing jQuery for Tabs

Question

I am in the process of developing a widget. The widget has three tabs that are implemented in the following way.

<div id="widget">
    <ul id="tabs">
        <li><a href="http...">One</a></li>
        <li><a href="http...">Two</a></li>
        <li><a href="http...">Three</a></li>
    </ul>

    <div id="tab_container">
        <div id="tab_content">
            //Tab Content goes here...
        </div>
    </div>
</div>

// The active class is initialized when the document loads 
$("#tabs li a").click(function()
{
$("#tabs li.active").removeClass("active");
    $("#tab_content").load($(this).attr('href'));
    $(this).parent().addClass("active");

    return false;   
});

The problem I am having is that the jquery code that have written is very slow. If the user changes tabs quickly the widget gets behing and bogged down. This causes the tabs to to not align with the data being displayed and just general lag. I believe that this is because the tab is being changed before $.load() is finished. I have tried to implement the following:

("#tabs li a").click(function()
{
$("#tabs li.active").removeClass("active");
    $("#tab_content").load($(this).attr('href'), function (){
        $(this).parent().addClass("active");
    });

    return false;   
});

It is my understanding that the callback function within in the load function does not execute until the load function is completed. I think this would solve my problem, however I can not come up with a way to select the correct tab that was clicked within the callback function. If this is not the way to do this then what is the best way implement these tabs so that they would stop loading an old request and load the newest tab selection by the user?

Thanks

score 2 · Answer 1 · answered Jun 10 '10 at 16:46

2

Why not just use the jQuery UI Tabs plug-in?

answered Jun 10 '10 at 16:46

Chris Johnston

1,919
14
18

You can do a custom build of jQueryUI (right on their web site) that only includes the tabs plug-in and its dependancies if you are worried about file size. – lambacck Jun 10 '10 at 16:47
We use jQuery for a lot more than just these tabs. I don't think the problem is with the file size I think it is with $.load() finishing before the next tab is clicked and caused the requests to get backlogged. – dbaugh Jun 10 '10 at 17:10

score 1 · Accepted Answer · answered Jun 10 '10 at 16:58

1

Regardless of whether you should use the jQuery UI tabs or not, this is how your code could be made to work

$("#tabs li a").click(function(e)
{
    var fn = function(a) {
        return function() {
            $(a).parent().addClass("active");
        };
    }
    $("#tabs li.active").removeClass("active");
    $("#tab_content").load($(this).attr('href'), fn(this));

    return false;
});

answered Jun 10 '10 at 16:58

Simen Echholt

11,243
2
34
26

Thanks for this code. It works and the the callback function is being run correctly. However, the problem still remains and is perhaps is a little worse when tabs are changed quickly. So, is there anyway to cancel the AJAX request once another one is made? I think maybe the way I am doing this fundamentally flawed. – dbaugh Jun 10 '10 at 19:50
If the request has been / is being processed by the server, there's little you can do. But take a look [here](http://stackoverflow.com/questions/446594/kill-ajax-requests-using-javascript-using-jquery) for how you could abort a request – Simen Echholt Jun 10 '10 at 20:30
Just for learnings sake since I am still a bit rusty with jQuery and javascript in general, why did you pass 'e' as a parameter for the function inside the click function? – dbaugh Jun 11 '10 at 14:04
It's the event object. It's not needed in this case, since it's not being used. It contains information about the event that triggered the handler. For example, you can do `e.target` to get what element was clicked. E.g you can replace `fn(this)` with `fn(e.target)` in my code and get the same result (though `this` is not always the same as `e.target`). Google `javascript event object` for more info :) – Simen Echholt Jun 11 '10 at 14:43

Optimizing jQuery for Tabs

2 Answers2