IE & Chrome ignoriert jQuery Aufruf vor der Ajax-Post

Question

Mit dem folgenden Code:

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

Ich habe einen <a>-Tag mit der ID von „langHref“, hier ist die Idee, dass kurz vor dem Ajax genannt wird link text ist auf "Translating ..." eingestellt und seine Farbe hat sich in Orange geändert. Nach dem Ajax wird der Linktext wieder auf den Standard "Sprache auswählen" zurückgesetzt.

Das funktioniert gut in FF aber schlägt in IE und Chrome fehl. Ich habe versucht alle javascript-Optionen und ajaxSend-Ereignisse zu versuchen, es zu setzen, bevor der Ajax erlischt, aber ohne Erfolg.

Wenn ich async: false ausschalte, dann ändert es offensichtlich den Text zurück zu "Wählen Sie eine Sprache" sofort und Sie sehen es nicht funktionieren. Ich habe auch async versucht: true und setze den "Translating ...." Anruf vorSend, der in keinem Browser funktioniert, den ich ausprobiert habe.

Gedanken?

Answer 1

Ich glaube, Sie beforeSend auf Ihre Ajax-Anforderung und tun dies dort wie so hinzufügen möchten:

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

und ein komplettes Verfahren zu:

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

Answer 2

kann getan werden, indem die async Eigenschaft an true und die letzte Zeile in das abgeschlossene Ereignis einfügen. Etwas wie folgt aus:

  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"); 
       } 
      }); 

Vielleicht, was passiert ist, dass vor dem Wechsel war die Benutzeroberfläche, weil die jQuery Ajax-Funktion Asynchron es die Benutzeroberfläche blockieren und so kann es nicht mehr geändert werden.