Question

I have a simple test page I’m using to test out displaying partial views with a vertical tabbed interface and jquery in MVC3…everything works fine, but I have one small issue.

Everything works fine, but I’d like to add a “loading” message and change the

class to “active” ONLY after the partial has been fully loaded…right now, it just retrieves the data, and the

class is changing before the partial is fully loaded.

This is my js code:

$('#left-nav li').live('click', function (event) {
    var navlink = $(this).children("a").attr("href");
    $('#left-nav li').removeClass('active');
    $.ajax({
        url: navlink,
        success: function (data) {
            //data contains the result returned by server you can put it in div here
            $('.content-panel').html(data);
        }
    });
    $(this).addClass('active');
    //here you have to return false to prevent anchor from taking you to other page
    return false;
});

Is there a way to intelligently determine if the partial has fully loaded before changing class?

Answer 1

Simply move your logic into the success callback:

$('#left-nav li').live('click', function (event) {
    event.preventDefault();
    var li = $(this);
    var navlink = li.children("a").attr("href");
    $('#left-nav li').removeClass('active');
    $.ajax({
        url: navlink,
        success: function (data) {
            //data contains the result returned by server you can put it in div here
            $('.content-panel').html(data);
            li.addClass('active');
        }
    });
});

I would also recommend switching to .on() rather than .live(). This requires jQuery 1.7+:

$('#left-nav').on('click', 'li', function (event) {
    e.preventDefault();
    var li = $(this);
    var navlink = li.children("a").attr("href");
    $('#left-nav li').removeClass('active');
    $.ajax({
        url: navlink,
        success: function (data) {
            //data contains the result returned by server you can put it in div here
            $('.content-panel').html(data);
            li.addClass('active');
        }
    });
});