2010-02-02 24 views
7

Kịch bản giống như: Tôi đang sử dụng Jquery để triển khai một số tính năng ajax. Ví dụ: khi người dùng nhấp vào nút "nhận dữ liệu", Jquery sẽ gọi hàm .ajax để tìm nạp một số dữ liệu từ máy chủ. Quá trình này có thể mất một chút thời gian, vì vậy tôi đã thêm các hàm .ajaxSend và .ajaxComplete để hiển thị một số hoạt ảnh cho quá trình chờ đợi (thực sự là một gif 'Tải dữ liệu' bên trong div với chỉ mục z: 999 để trở thành phần đầu của các div khác bên trong). Trong quá trình chờ ('Tải dữ liệu'), tôi muốn ngăn người dùng nhấp vào các nút khác (ví dụ: Tôi có các tab, nút khác bên dưới gif 'Tải dữ liệu' nhỏ). Cách tôi đạt được điều này là:cách ngăn chặn tương tác của người dùng khi chờ phản ứng của ajax

$("body").ajaxSend(function() 
    { 
     $(this).append('<div id="loading">Data Loading<\/div>'); 
     $("div#error").remove(); 
     $(this).children().not('#loading').css({'opacity':0.22}); 
    }); 
    $("body").ajaxComplete(function() 
    { 
     $("div#loading").remove(); 
     $(this).children().not('#loading').css({'opacity':1}); 
    }); 

Tuy nhiên, tôi không nghĩ rằng thay đổi độ mờ là cách tốt nhất. Trừ khi bạn làm cho độ mờ thành 0, người dùng vẫn có thể nhấp vào các nút/tab khác. Tôi không biết làm thế nào để tránh hoàn toàn bất kỳ tương tác người dùng nào trong quá trình này? Cảm ơn!!

Trả lời

5

Sử dụng lớp phủ.

http://jqueryui.com/demos/dialog/#modal

+0

thực sự, tôi cũng đang sử dụng JqueryUI. Có, tôi vừa thử tùy chọn phương thức của hộp thoại. Thật dễ dàng để đạt được hiệu ứng khối mà tôi muốn. Tuy nhiên, có cách nào đó để loại bỏ các cross-over (nút đóng) trên góc trên bên phải của hộp thoại? – WilliamLou

+0

Xem http://stackoverflow.com/questions/896777/remove-close-button-on-jqueryui-dialog –

+0

cảm ơn. Tôi đã chọn câu trả lời này kể từ khi tôi đã sử dụng JqueryUI để tôi không phải nhập một plugin khác cho hiệu ứng blockUI – WilliamLou

5

Hãy nhìn thấy một div với z-index trên bất cứ điều gì khác. vô ích, giấu nó đi.

Đối với IE6, hãy xem xét khả năng hiển thị của các đầu vào được chọn

+0

Tôi ước mình có thể upvote (nhưng tôi ra ngoài trong vài giờ tới), đặc biệt là cảnh báo của IE6 và các yếu tố hình thức. – Sampson

6

Tôi đã sử dụng jQuery Block UI với thành công tốt trong quá khứ. Hoạt động tốt với Ajax:

http://malsup.com/jquery/block/

Có thể là giá trị sử dụng một plugin như thế này, chứ không phải là một giải pháp tương tự handcoding ...

+0

tốt, plugin này hoạt động tốt cho mục đích này, nhưng tôi không muốn nhập quá nhiều plugin ở giai đoạn này. Dù sao cũng cảm ơn bạn. Nếu tôi không thể tìm thấy giải pháp dễ dàng hơn, tôi có thể chuyển sang BlockUI sau. – WilliamLou

0

Tôi sử dụng biến thể trên Ben Nadel's ajax pipeline. Về cơ bản, ông kết thúc cuộc gọi jQuery $ .ajax với một đối tượng có thể ghi lại các yêu cầu ajax gửi đi.

Khi yêu cầu ajax xuất hiện, bạn sẽ ghi lại tên yêu cầu. Nếu có thêm bất kỳ yêu cầu nào cố gắng để đi ra ngoài với cùng một tên, bạn không thực hiện nó (tùy chọn cung cấp một tin nhắn cho người dùng).

0

Tôi đang cố gắng trả lời câu hỏi tương tự và tôi đã kết thúc ở đây. Tôi biết đó là một câu hỏi cũ nhưng tôi muốn giải quyết rằng một lớp phủ được đặt trên các phần tử mà bạn muốn ngăn chặn sự tương tác, có thể dễ dàng bị xóa qua trình kiểm tra trình duyệt. Có vẻ như với tôi rằng cách tốt nhất để tiếp cận vấn đề này là thiết lập một biến boolean toàn cục cho toàn bộ trang và thực hiện các hành động trên trang khi ajax không chạy (ít nhất là các hành động nhạy cảm) hoặc chỉ tắt cuộc gọi không đồng bộ cho ajax vì thực tế trong kịch bản này bạn dường như không cần nó (mặc dù tôi biết một số người sẽ đóng đinh tôi vì đã nói điều này).

Các vấn đề liên quan