Chia sẻ kinh nghiệm: sử dụng ajaxComplete()

Chào mừng các bạn đã quay trở lại với thachleblog, ở bài trước, mình đã demo cách load dữ liệu bằng cách call ajax. Bài viết hôm nay, mình sẽ giới thiệu với các bạn một tính năng khác của ajax đó là ajaxComplete(). Nhìn cái tên ajaxComplete() thôi các bạn cũng đoán được method này giải quyết vấn đề gì rồi phải không?

Đúng rồi đó, nhưng để hiểu hơn method này được dùng trong trường hợp nào. Các bạn hãy xem tình huống của mình nhé.

ajaxComplete()

Mình biết đến method này vào một ngày đẹp trời. Khi ánh nắng ban mai rọi qua khung cửa sổ, ngoài cành cây, bầy chim non hót véo von… :))). Mình develop một chức năng tương tự như ở ví dụ bài trước, cho phép user click vào button “tải thêm” thì data sẽ trả về. Sau khi nhận data trả về thì mình cần gọi method update để update chiều cao của panel chứa data. Đơn giản là cái bảng chứa dữ liệu cần tự động cập nhật theo lượng dữ liệu.

Đoạn code đó đại loại sẽ giống như này:

  1. $(".btnLoadMore").click(function() {
  2. loadMoreData(); get data from server
  3. update(); // update heigh panel
  4. });

Logic code rất easy, method update() cần chạy sau khi method loadMoreData() đã chạy xong. Mình code xong, deploy luôn. Kết quả, thật bất ngờ, data được lấy về nhưng cái panel chứa lại không update? Debug vào thì thấy cả 2 method đều chạy.

Fu*k, đơn giản vậy mà cũng không chạy, muốn chửi thề ghê. Ngồi xem lại code của method update(), rõ ràng là không có vấn đề gì. Thế mà tại sao code không chạy? Thế mà ngồi nghĩ vẩn vơ, debug cả tiếng đồng hồ…

Một ý nghĩ “exellent” chợt lóe lên. Có khi nào method loadMoreData() chưa chạy xong mà update() đã chạy không? Ngồi thử trên console của chrome và kết quả đúng là như dự đoán. Chỉ cần gọi method update() ngay sau khi method loadMoreData() hoàn thành thì kết quả như mong muốn.

Đã tìm ra nguyên nhân thì vấn đề đã được giải quyết hơn một nửa. Ngồi google 5 – 10′ là có cách giải quyết. JQuery trigger ajaxComplete() khi ajax request hoàn thành. Và kết quả là ta chỉ việc thêm vào đoạn code ở trên như sau:

  1. $(".btnLoadMore").click(function() {
  2. loadMoreData();
  3. $( document ).ajaxComplete(function( event,request, settings ) {
  4. update();
  5. });
  6. });

 

Kết quả cuối cùng, chạy ngon. Các bạn có thể xem thêm docs về ajaxComplete() tại đây.

Ngoài cách sử dụng ajaxComplete, ta cũng có thể update method ajax ở bài trước như sau:

  1. $.ajax({
  2. url: ,
  3. type: 'POST',
  4. data: params,
  5. async: true
  6. }).done(function (resp) {
  7. if (resp.err < 0) {
  8.  
  9. } else {
  10.  
  11. }
  12.  
  13. });

Ở trường hợp này, sử dụng ajaxcomplete hoặc ajax done đều sẽ cho kết quả tương tự.

Kết

Qua tình huống của mình, các bạn có thể thấy. Mấu chốt để giải quyết vấn đề thường là tìm ra nguyên nhân gây ra vấn đề. Chuyện còn lại thường rất đơn giản. Mình cũng đã từng gặp vấn đề tương tự, mất gần cả ngày debug để tìm ra đoạn code gây lỗi. Và cũng chỉ mất vài phút để sửa…

Hy vọng bài viết vừa rồi của mình sẽ giúp các bạn không chuyên về frontend biết thêm về một tính năng của JQuery ajax. Nếu bạn có kinh nghiệm gì hay, hãy chia sẻ vào comment bên dưới nhé, để chúng ta cùng rút kinh nghiệm.

Cảm ơn và hẹn gặp lại các bạn ở các bài viết sau.

Chúc tất cả cuối tuần vui vẻ.

Tham gia bình luận