jQuery Ajax (trước khi gửi và hoàn tất) hoạt động đúng trên FireFox nhưng không hoạt động trên IE8 và Chrome

Question

Tôi đang sử dụng phiên bản Java ajax 1.4.1 trong ứng dụng MVC của mình (mặc dù vấn đề tôi đang thảo luận tương tự với phiên bản jQuery cũ 3.2.1) là tốt, để kiểm tra trong quá trình đăng ký khách hàng nếu tên người dùng đã được đăng ký. Khi người dùng nhấp vào nút "Kiểm tra tính khả dụng", tôi hiển thị hình ảnh bận thay cho nút kiểm tra (thực sự ẩn nút kiểm tra và hiển thị hình ảnh) trong khi kiểm tra tính khả dụng trên máy chủ và sau đó hiển thị thông báo. Đó là một cuộc gọi Sync (async: false) và tôi đã sử dụng beforeSend: và complete: để hiển thị và ẩn hình ảnh bận và nút kiểm tra. Điều này đang làm việc tốt trên Firefox nhưng trong IE 8 và Chrome, không phải hình ảnh bận xuất hiện cũng không phải nút kiểm tra ẩn thay vì nút kiểm tra vẫn được nhấn như toàn bộ điều đã treo. Các tin nhắn khả dụng và không có sẵn xuất hiện chính xác. Dưới đây là các mã:

HTML trong User Control (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" /> 

Trên đỉnh kiểm soát người dùng này, tôi đang liên kết một bên ngoài javascript tập tin đó có đoạn mã sau:

$(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

Tôi đã tìm thấy câu trả lời cho câu hỏi của mình. Nó thực sự là cuộc gọi đồng bộ (async = false) khiến IE trở nên điên rồ. Tôi loại bỏ điều đó và điều chỉnh mã và mọi thứ đang hoạt động tốt ngay bây giờ.

Answer 2

Điểm cần lưu ý: async = false không được dùng như jQuery 1.5

Nên sử dụng gọi lại hoàn chỉnh() thay thế.