частичное представление на той же странице mvc3 с jquery - PullRequest
Новая
       17

частичное представление на той же странице mvc3 с jquery

0 голосов
/ 19 декабря 2011

У меня есть простая тестовая страница, которую я использую для тестирования отображения частичных представлений с вертикальным интерфейсом с вкладками и jquery в MVC3 ... все работает нормально, но у меня есть одна небольшая проблема.

Все работаетхорошо, но я хотел бы добавить «загрузочное» сообщение и изменить класс

на «активный» ТОЛЬКО после полной загрузки частичного ... сейчас он просто получает данные, а класс изменяется до полной загрузки части.

Это мой код js: 

$('#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;
});

Есть ли способ разумно определить, полностью ли загружена часть, до изменения класса?

Ответы [ 3 ]

3 голосов
/ 19 декабря 2011

Я думаю, что вы хотите переместить 

$(this).addClass('active');

в success ajax callback.Однако $ (this) будет другим контекстом внутри success, поэтому вам придется сохранить контекст $(this) в переменной до вызова ajax и ссылаться на сохраненную переменную контекста из success.

2 голосов
/ 19 декабря 2011

Возможно, я что-то упускаю в вашем вопросе, но я считаю, что вам просто нужно добавить класс active в обратном вызове успеха вашего вызова ajax. 

$('#left-nav li').live('click', function (event) {
    event.preventDefault();
    var navlink = $(this).children("a").attr("href");
    $('#left-nav li').removeClass('active');
    var self = $(this);
    $.ajax({
        url: navlink,
        success: function (data) {
            //data contains the result returned by server you can put it in div here
            $('.content-panel').html(data);
            self.addClass('active');
        }
    });
});
2 голосов
/ 19 декабря 2011

Просто перенесите свою логику в обратный вызов успеха: 

$('#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');
        }
    });
});

Я бы также рекомендовал переключиться на .on() вместо .live().Для этого требуется 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');
        }
    });
});
...