[code] Thay đổi và cập nhật status nhanh

Đây là bài viết đầu tiên mình thử nghiệm việc viết tut ở
mức sơ lược nhưng đi sâu vào giải thích cách sử dụng hơn. Trong bài viết
dưới đây mình dùng nick admin, uid=1 làm ví dụ, nó cũng không liên quan
nhiều đến cách sử dụng code này.

Demo: [You must be registered and logged in to see this link.]
ID: khachviengtham
PW: 2012fmvi


Bước 1: Tách riêng và hiển thị status trong bài viết.

Templates >> viewtopic_body:

Đầu tiên bạn cần xóa cái status trong bài viết đi, bạn tìm đoạn này:

Code:

{postrow.displayed.profile_field.LABEL}{postrow.displayed.profile_field.CONTENT}

Thay bằng:

Code:

{postrow.displayed.profile_field.LABEL}{postrow.displayed.profile_field.CONTENT}

Và ta sẽ dùng code sau để xóa nó:

Code:

$(".fmviTT:contains('Status')").remove();

Tiếp đó, bạn đặt code dưới đây vào chỗ nào muốn hiện status trong bài viết. Nó là toàn bộ profile field của thành viên.

Code:

Trong template là thế, còn ngoài bài viết thì nó hiện như thế này:

Code:

Tất
nhiên là có nhiều field khác, nhưng ta chỉ quan tâm cái status thôi,
bây giờ ta sẽ dùng jQuery để xóa hết mất cái linh tinh, chỉ lấy ra Nội dung status thôi.

Code:

$(".showST").each(function () {
   var a = $(this).find("a[href^='/u']").attr("href").slice(2);
   var b = $(this).find("p > span:contains('Status')").next("strong").text();
   $(this).replaceWith('' + b + '');
});

Kết quả sẽ ra thế này:

Code:

Nội dung status

Phần
class u1 sẽ thay đổi tùy theo tác giả bài viết, mình làm thế này để
tiện cho việc phân biệt status của ai, dùng cho phần cập nhật status sau
này. Có cách gọn hơn, nhưng đây là cách đơn giản nhất. Theo cách này
bạn chỉ cần đặt mớ Tempate kia ở đâu trong bài viết thì status sẽ hiện
đúng chỗ đấy.

Toàn bộ code hoàn chỉnh của bước 1:

Code:

Đặt code trên vào cuối viewtopic_body.


Bước 2: Cập nhật Status tại mọi nơi trên diễn đàn.

General > Site description:

Code:

USERLINK sẽ cho ra cấu trúc HTML như thế này:

Code:

[url=http://www.fmvi.vn/profile.forum?mode=viewprofile&u=1]admin[/url]

Ta sẽ dễ dàng lấy ra tên và số thứ tự (uid) của thành viên đang truy cập.

Code:

Tuy nhiên, trong bài này ta không cần dùng đến nameUser

Cấu trúc HTML cần có 2 phần Nhập và Đăng status:

Code:




Một cái input để nhập liệu, và một button để... nhấn. Bạn có thể thay bằng bất cứ cách nào khác khi đã hiểu cách sử dụng nó.

Bây giờ ta sẽ viết mã jQuery để gửi status:

Code:

Phần chú thích mình đã ghi kỹ trong code, nên chỉ giải thích thêm một số chỗ sau:

id của field Status:
Mặc dịnh của fm là -8, nếu bạn dùng field khác thì nó là con số cuối
cùng trong id của phần tử chứa nó, bật firebug lên là thấy ngay.

id của phần nhập liệu field Status: khi bạn sửa status trong profile, nó hiện ra 1 cái input để bạn nhập, và đây là id của cái input đấy.

Nếu bạn không thể tìm ra nó thì dùng đoạn mã sau:

Code:




Chỉ
cần tạo một trang HTML, cho nó vào, bấm Preview rồi nhập tên của
profile field bạn cần tìm. Nhớ nhập đúng chữ hoa thường, đợi 1 tý là nó
trả kết quả về.
Demo: [You must be registered and logged in to see this link.]

Bây giờ đến phần sử lý sau khi gửi.

Code
này mình tra trong trang profile, họ dùng json để tạo mảng lưu dữ liệu
vào, cái dòng content ấy. Nói chung là sau khi xử lý json thì nó sẽ trả
về kết quả kiểu thế này: [[profile_field_id, value]]

Khi
mình gửi xong nó trả về kết quả [object Object]. Nó không có nghĩa là
gửi thành công, mà chỉ là thông báo có tìm thấy cái input nhập liệu. Nếu
bạn không cho phép thành viên tự sửa status trong profile thì nó sẽ
không trả kết quả về. Mình không tìm thấy lệnh nào thông báo nào khác
nên tạm dùng cách này. (mà làm đúng như mình thì chẳng lỗi đâu, yên
tâm.)

Khi bạn gửi xong, theo như cách trên mình xem như gửi thành
công. Do sever không trả gì về nên mình lấy luôn cái giá trị mình nhập
vào input#statusT để cập nhật status. Ở đây mình cho nó cập nhật luôn
vào phần Status trong bài viết.

Code:

$(".showST.u" + idUser).text(a)

Xem lại một chút, đây là kết quả cuối bước 1:

Code:

Nội dung status

Trong
ví dụ này là thành viên có uid=1 đang thay status, thế nên đoạn mã trên
sẽ tìm đúng status của người đó để cập nhật. Đấy là khi bạn đang ở
trong trang xem bài viết, còn nếu bạn ở ngoài trang chủ hay hòm thư thì
sao? phải làm một chổ hiển thị đẹp đẹp tý.

Code:

Đặt nó ở chỗ nào bạn thích, nên đặt vào overall_header luôn để đi đâu cũng sài được. Sửa lại mã trên như sau:

Code:

$("#viewST, .showST.u" + idUser).text(a)

Nếu vậy thì bình thường, khi bạn không thực hiện cập nhật status, cái span#viewST này sẽ trống trơn, chuyển trang mới là mất.

Vậy ta sẽ dùng cách tải status ngay khi đăng nhập.

Code:

$.get("/u" + idUser, function (c) { // Tải dữ liệu trang cá nhân
   $("#viewST").text($(c).find("#profile_field_13_-8").val()) // Lấy giá trị của field Status
});

Nếu
cứ mỗi lúc chuyển trang lại tải một lần nó sẽ khá bất tiện và làm chậm
forum. Thế nên sau lần tải này, mình sẽ lưu luôn nó vào cookie của trình
duyệt luôn cho tiện.

Code:

my_setcookie("fmviST", $("#viewST").text()); // Đặt giá trị của status cho cookie fmviST
if (my_getcookie("fmviST") != null) {
   $("#viewST").text(my_getcookie("fmviST")); // Cập nhật status từ cookie
}

Toàn bộ code hoàn chỉnh của bước 2:

Code:

cai tren cùng ko co code