IE и Chrome игнорируя JQuery вызов до Ajax поста

Question

С помощью следующего кода:

  $('#langHref').html("Translating...").css("color","#FF9933"); 

      jQuery.ajax({ 
       type: "post" 
       , url: someUrl 
       , data: { "text": $('body').html() } 
       , async: false 
       , success: function (data, status) { 
        $('body').html(data);      
       }, 
       error: function() { 
        alert('We are sorry, there was an error in the translation service.'); 
        //console.log("ERROR", arguments); 
       } 
      }); 

      $('#langHref').html("Select Language").css("color",""); 
     } 

У меня есть <a> тег с идентификатором «langHref», идея в том, что как раз перед Аяксом называется текст ссылки установлен на «Перевод ...», а его цвет изменился на оранжевый. После завершения ajax текст ссылки возвращается к стандарту «Выбрать язык».

Это хорошо работает в FF, но не работает в IE и Chrome. Я пробовал все параметры beforeSend jQuery и события ajaxSend, чтобы попытаться установить его до выхода ajax, но безрезультатно.

Если я отключу async: false, то, очевидно, это немедленно изменит текст на «Выбрать язык», и вы не увидите, что он работает. Я также попробовал async: true и поместил вызов «Translating ....» beforeSend, который не работает в любом браузере, который я пробовал.

Мысли?

Answer 1

Я думаю, что вы хотите добавить beforeSend к вашему AJAX запроса и сделать это там, как так:

beforeSend: function (xhr) { 
    $('#langHref').html("Translating...").css("color","#FF9933"); 
} 

и полный метод тоже:

complete : function(jqXHR, textStatus) { 
      $('#langHref').html("Select Language").css("color",""); 
}, 

Answer 2

может быть сделано путем изменения async Свойство: true и положить последнюю строку в завершенное событие. Что-то вроде этого:

  jQuery.ajax({ 
       type: "post" 
       , url: someUrl 
       , data: { "text": $('body').html() } 
       , async: true 
       , success: function (data, status) { 
        $('body').html(data);      
       }, 
       error: function() { 
        alert('We are sorry, there was an error in the translation service.'); 
        //console.log("ERROR", arguments); 
       }, 
       completed:function(){ 
        $('#langHref').html("Select Language").css("color",""); 
       }, 
       beforeSend:function(){ 
       $('#langHref').html("Translating...").css("color","#FF9933"); 
       } 
      }); 

Может быть, то, что происходит в том, что перед изменением пользовательского интерфейса, так как функция JQuery Ajax была асинхронным он блокирует пользовательский интерфейс и, таким образом, он не может быть изменен.