Asked Nov 5th, 2018 2:06 AM 487 0 2
  • 487 0 2
+1

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

Share
  • 487 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 ANSWERS


Answered Nov 5th, 2018 2:16 AM
Accepted
+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é

Share
Nov 5th, 2018 2:21 AM

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 ạ

0
| Reply
Share
Vũ Nguyễn @vunguyen10111995
Nov 5th, 2018 2:35 AM

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

+1
| Reply
Share
Nov 5th, 2018 2:38 AM

ok em cảm ơn ạ

0
| Reply
Share
Nov 5th, 2018 2:39 AM

@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>`)
        }
    });
+1
| Reply
Share
Nov 5th, 2018 2:42 AM

@quankm1097 em cảm ơn

0
| Reply
Share
Nov 5th, 2018 6:50 AM

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

0
| Reply
Share
Answered Nov 5th, 2018 2:09 AM
+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?')

😃

Share
Nov 5th, 2018 2:19 AM

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ì ạ

0
| Reply
Share
Vũ Nguyễn @vunguyen10111995
Nov 5th, 2018 2:33 AM