Plugin xếp hạng sao JQuery - vô hiệu hóa sau khi gửi phiếu bầu

Question

Tôi đang sử dụng plugin xếp hạng sao JQuery (v2.61) từ http://www.fyneworks.com/jquery/star-rating/. Mọi thứ đang diễn ra tốt đẹp, nhưng tôi muốn vô hiệu hóa các ngôi sao khi người dùng đã bỏ phiếu.

Hiện tại người dùng của tôi chọn xếp hạng của họ và nhấp chuột. cập nhật cơ sở dữ liệu của tôi thông qua cuộc gọi AJAX. Bản sao thay đổi thành hiển thị lựa chọn của người dùng, với các sao được hiển thị bằng màu đỏ. Tuy nhiên nếu người dùng cuộn chuột qua các sao họ vẫn hoạt động và họ có thể gửi một phiếu bầu khác. Tôi sẽ ngừng bỏ phiếu trùng lặp này phía máy chủ, nhưng từ quan điểm khả năng sử dụng, tôi muốn các dấu sao bị tắt sau khi nhấp chuột của người dùng.

(Tôi đoán tôi có thể tải lại div hoặc thứ gì đó bằng JQuery để hiển thị phiên bản chỉ đọc của các ngôi sao, nhưng tôi đã hy vọng có thêm một số giải pháp thanh lịch và đơn giản hơn).

Cảm ơn.

Answer 1

Điều bạn thực sự muốn là hoàn nguyên các phần tử thành nút radio, sau đó thêm chỉ đọc và sau đó làm cho chúng trông đẹp trở lại. Hoàn nguyên dường như không thể, nhưng bạn có thể hủy liên kết tất cả các sự kiện trên bài đăng lên máy chủ. $ ("..."). unbind();

Answer 2

Điều này có thể tương tự như giải pháp 'tải lại div', nhưng tôi nghĩ giải pháp tốt nhất có thể đơn giản là vô hiệu hóa các mục nhập sau khi bạn đã thực hiện yêu cầu AJAX của mình. Nếu bạn đang sử dụng jQuery.ajax, bạn có thể chỉ định một hàm gọi lại để chạy sau khi yêu cầu hoàn tất.

jQuery.ajax({ 
    type: "POST", 
    url: ... 
    data: ... 
    contentType: "application/json; charset=utf-8", 
    dataType: "json", 
    success: function(msg) { 
     jQuery('.star').attr('disabled', true); 
    }, 
    error: function(XMLHttpRequest, textStatus, errorThrown) { 
     displayError(); 
    } 
}); 

Từ trang web của họ:

Sử dụng thuộc tính tàn tật sử dụng một điều khiển cho mục đích hiển thị chỉ

<input name="star3" type="radio" class="star" disabled="disabled"/> 
<input name="star3" type="radio" class="star" disabled="disabled"/> 
<input name="star3" type="radio" class="star" disabled="disabled" checked="checked"/> 
<input name="star3" type="radio" class="star" disabled="disabled"/> 
<input name="star3" type="radio" class="star" disabled="disabled"/> 

Answer 3

Tại sao không cho phép người dùng cập nhật đánh giá của họ ? Có lẽ đánh giá đầu tiên của họ là vội vàng và họ muốn thay đổi nó, hoặc có thể họ chỉ đơn giản là nhấp vào ngôi sao sai.

Tất nhiên, bạn cần một số cách để xác định từng người dùng và một nơi nào đó để lưu trữ từng xếp hạng của người dùng cho từng mục.

(Tôi thực sự không biết cách thực hiện bất kỳ điều này, nhưng theo quan điểm khả năng sử dụng, có vẻ như cách tiếp cận tốt hơn là đảm bảo bạn nhận được ngay lần đầu tiên vì bạn không thể thay đổi nó sau đó.)

Answer 4

Sự cố đã được giải quyết trong bản phát hành plugin mới nhất. Giờ đây, bạn có thể chỉ cần thực hiện:

this.rating('disable'); 

Yey!

Answer 5

Tôi là tác giả của plugin và tôi vừa mới phát hành một phiên bản mới (3.1) sẽ giải quyết các vấn đề bạn đã thảo luận tại đây.

@ planetjones, lưu ý rằng this.rating ('disable'); không giống như this.rating ('readOnly'); điều này.đánh giá ('readOnly') sẽ ngăn chặn sự kiểm soát từ việc thay đổi lựa chọn hiện tại trong khi this.rating ('disable') sẽ ngăn chặn giá trị được gửi hoàn toàn.

@ svinto, plugin được sử dụng để xóa hộp radio, nhưng bây giờ nó ẩn chúng. để hoàn nguyên, tất cả những gì bạn phải làm là 1. xóa các ngôi sao 2. hiển thị các hộp radio 3. xóa dữ liệu của plugin khỏi hộp radio - $(). Data ('rating') và $ () .data ('rating.star') 4. unbind 'thay đổi' sự kiện từ các hộp phát thanh

Bằng cách này, bản cập nhật sẽ được thông báo ở đây: http://twitter.com/fyneworks