jQuery Ajax (beforeSend e complete) funziona correttamente su FireFox ma non su IE8 e Chrome

Question

Sto usando jQuery ajax versione 1.4.1 nella mia applicazione MVC (anche se il problema di cui sto discutendo era lo stesso con la vecchia versione jQuery 3.2.1), per verificare durante la registrazione del cliente se il nome utente è già registrato. Mentre l'utente fa clic sul pulsante "Verifica disponibilità", visualizzo un'immagine occupata al posto del pulsante di controllo (in realtà nasconde il pulsante di controllo e mostra l'immagine) mentre controlla la disponibilità sul server e quindi visualizza un messaggio. È una chiamata di sincronizzazione (async: false) e ho usato beforeSend: e complete: per mostrare e nascondere l'immagine occupata e il pulsante di controllo. Questa cosa funziona bene su Firefox, ma in IE 8 e Chrome, né l'immagine occupata appare né il pulsante di controllo si nasconde, piuttosto il pulsante di controllo è rimasto premuto mentre l'intera cosa si è impiccata. I messaggi disponibili e non disponibili vengono visualizzati correttamente. Di seguito è riportato il codice:

HTML in un controllo utente (ascx):

<div id="available">This Username is Available</div> 

div id="not_available">This Username is not available</div> 

<input id="txtUsername" name="txtUsername" type="text" size="50" />&nbsp; 

<button id="check" name="check" type="button">Check Availability</button> 

<img id="busy" src="/Content/Images/busy.gif" /> 

Sulla cima di questo controllo utente, stanno collegando un file JavaScript esterno che ha il seguente codice:

$(document).ready(function() { 

    $('img#busy').hide(); 
    $('div#available').hide(); 
    $('div#not_available').hide(); 

    $("button#check").click(function() { 
     var available = checkUsername($("input#txtUsername").val()); 

     if (available == "1") { 
      $("div#available").show(); 
      $("div#not_available").hide(); 
     } 
     else { 
      $("div#available").hide(); 
      $("div#not_available").show(); 
     } 
    }); 
}); 


function checkUsername(username) { 

    $.ajax({ 

     type: "POST", 

     url: "/SomeController/SomeAction", 

     data: { "id": username }, 

     timeout: 3000, 

     async: false, 

     beforeSend: function() { 

      $("button#check").hide(); 

      $("img#busy").show(); 

     }, 

     complete: function() { 

      $("button#check").show(); 

      $("img#busy").hide(); 

     },   

     cache: false, 

     success: function(result) { 

      return result; 

     }, 

     error: function(error) { 

      $("img#busy").hide(); 

      $("button#check").show(); 

      alert("Some problems have occured. Please try again later: " + error); 

     } 

    }); 

} 

Answer 1

Ho trovato la risposta alla mia domanda. In realtà era la chiamata di sincronizzazione (async = false) che stava facendo impazzire IE. L'ho rimosso e ho modificato il codice e ora tutto funziona correttamente.

Answer 2

punto da notare: async = false è deprecato come di jQuery 1.5

dovrebbe usare completa callback(), invece.