Yêu cầu thg 11 5, 2018 2:06 SA 894 0 2
  • 894 0 2
+1

hỏi về thông báo thành công khi dùng ajax

Chia sẻ
  • 894 0 2

cho em hỏi khi em thêm hoặc xóa một cái gì đó bằng ajax, bên controller em return json nhưng em không biết phải làm sao để hiện thông báokhi dùng ajax, em chỉ hiển hiển thông báo thành công bằng alert, em muốn hiển thị thông báo khi sử dụng https://codeseven.github.io/toastr/demo.html thì làm kiểu gì ạ, em tìm hiểu google mà không được mong các anh chị giúp đỡ em cảm ơn!

2 CÂU TRẢ LỜI


Đã trả lời thg 11 5, 2018 2:16 SA
Đã được chấp nhận
+7

ở code đoạn ajax, sau khi bạn gửi lên server, thì nó sẽ cho bạn 1 cái hàm trả về như success, fail, error, done. Ở trong này bạn có thể xem đc response từ server trả về. Bạn check data và sử dụng toastr như bình thường thôi. Ví dụ:

$(document).on('click', '.button', function(e) {
        //sử dụng ajax ở đây
    }).success(function(data) {
       console.log(data)
        toastr.success('Create successfully !');
    });

Bạn nhớ là phải chèn thư viện toastr vào đấy nhé

Chia sẻ
thg 11 5, 2018 2:21 SA

e làm được rồi ạ, nếu em chỉ sử dụng thông báo thường của boostrap thôi thì làm sao ạ

Avatar Vũ Nguyễn @vunguyen10111995
thg 11 5, 2018 2:35 SA

@xuanhung http://jsfiddle.net/g1rnnr8r/2/ bạn có thể tham khảo ví dụ này nhé

thg 11 5, 2018 2:38 SA

ok em cảm ơn ạ

thg 11 5, 2018 2:39 SA

@xuanhung Bạn có thể làm theo cách này

Trong file html

<div>
  <button>Send request</button>
  <div id=alert></div>
</div>
$(document).on('click', '.button', function(e) {
        //sử dụng ajax ở đây
    }).success(function(data) {
        if(!$.trim( $('#alert').html() ).length) {
          $('#alert').append(`<div class="alert alert-primary" role="alert">
             Create successfully !
               </div>`)
        }
    });
thg 11 5, 2018 2:42 SA

@quankm1097 em cảm ơn

thg 11 5, 2018 6:50 SA

@xuanhung accept câu trả lời chạy được đi bạn, để ng sau còn biết 😄

Đã trả lời thg 11 5, 2018 2:09 SA
+3

1. Link to toastr.css <link href="toastr.css" rel="stylesheet"/>

2. Link to toastr.js <script src="toastr.js"></script>

3. Use toastr to display a toast for info, success, warning or error

// Display an info toast with no title

toastr.info('Are you the 6 fingered man?')

😃

Chia sẻ
thg 11 5, 2018 2:19 SA

em cảm ơn ạ, vậy nếu em sử dụng thông báo của boostrap thì làm kiểu gì ạ

Avatar Vũ Nguyễn @vunguyen10111995
thg 11 5, 2018 2:33 SA
Viblo
Hãy đăng ký một tài khoản Viblo để nhận được nhiều bài viết thú vị hơn.
Đăng kí