JQuery не обновляет DOM немедленно?

Question

Я просмотрел несколько других вопросов и попробовал несколько вариантов, но все еще немного потерял.

РЕДАКТИРОВАТЬ - ПРОСТО ПОКАЗАТЬ СДЕЛАННЫЙ ФАКТИЧЕСКИЙ ЗВОНОК AJAX ..

$.ajax({
    type: 'GET',
    url: 'AJAXget/getPostcodeCheck.ashx',
    data: 'postcode=' + postcode,
    async: false,
    timeout: 10000,
    success: postcodeCallback,
    error: function () {
        alert('Sorry, there was an issue contacting the server.. please retry.');
        return;
    }
});

У меня есть следующая функция jQuery AJAX bind, где я хочу показать, что что-то загружается, например ..

$('#' + btnID).bind('ajaxStart', function () {
    $('#' + btnID).append('<div>loading</div>');
});

Это просто базовый пример. Я использовал функцию addClass дляelement (#btnID - это div), но опять же, похоже, ничего не происходило напрямую.

Я поместил в функцию оператор оповещения, чтобы проверить, что ajaxStart запускается, и похоже, что это так ..Я предполагаю, что мой недостаток понимания DOM и / или jQuery виноват!то есть почему любое обновление / внедрение DOM не показывается немедленно?

Любые указатели / идеи высоко ценятся!

Answer 1

Я предполагаю, что этот код вызывается после нажатия пользователем кнопки. В таком случае, почему вы не делаете следующее:

1. Перед Ajax-вызовом вы делаете: $ ('#' + btnID) .append ('loading');
2. В случае успеха или ошибки вы делаете: $ ('#' + btnID) .remove ();

Я уверен, что такой подход будет работать.

Answer 2

Попробуйте кодировать ваш метод ajaxStart следующим образом:

$('#' + btnID).ajaxStart(function() {
  $(this).append('<div>loading</div>');
});

Кроме того, посмотрите, что произойдет, если вы упростите вызов jQuery Ajax следующим образом:

$.get('AJAXget/getPostcodeCheck.ashx', { postcode: postcode }, function(data) {
  //$('#yourResultElement').html(data);
  console.info(data);
});

Если вы используете Firebug (вы используете Firebug, верно?), Перейдите на вкладку Консоль и посмотрите, что возвращается.