Question

I have a tabbed menu system and on tab click loads a specific page into the tabs relevant div.

Currently I have a series of the following functions. A set for each tab and this makes for some pretty ugly code. Is there anything I can do to simplify and reduce the repetition?

Each “TAB” instance is the name of the tab that has been clicked. The {% url … %} section is a Django dynamic URL.

I was thinking that if the tab name and url were put into an array of sorts it would at least enable for all the functions to be created en masse. But is there away of simplifying it further?

Thank you for any help.

    function loadTABlog() {
        $("#TABlog").load("{% url list_TABlog person.id %}", function(response, status, xhr) {
            if (status == "error") {
                var msg = "Sorry but there was an error: ";
                $("#TABlog").html(msg + xhr.status + " " + xhr.statusText);
            }
        });
        return false;
    };
    $("#loadTABlog").click(function() {
        $("#TABlog").empty().html('<img src="{{ STATIC_URL }}loading.gif" class="ajaxloader" />');
        loadTABlog();
    });

Answer 1

I’d try to make it data-driven. Something along the lines of

var tabs = [
    {activator: "#loadTabLog",
     element: "#tabLog",
     url: "{% url list_tab_log 9000 %}"},
    ...
];

And iterate through it, assigning handlers:

for (var i = 0; i < tabs.length; ++i) {
    var t = tabs[i];
    $(t.activator).click(function() {
        $(t.element).empty().html("<img>");
        ...
        $(t.element).load(t.url.replace("9000", actual_user_id), ...);
    });
}