toastr messages not displaying in IE

Question

In firefox, this works great - the toastr (https://github.com/CodeSeven/toastr) displays both success and error messages. In IE, there is no error and the messages are not displayed. Is there an issue with how I'm calling the toastr methods?

    $.ajax({
                url: '/api/emailtemplate/',
                type: 'POST',
                data: ko.toJSON(self),
                contentType: 'application/json',
                //dataType: 'json',
                success: function (result) {
                    toastr.success('Template was saved successfully!');

                },
                error: function () { toastr.error('Template was not saved.', 'Template         error!'); }
            });

score 0 · Answer 1 · answered Feb 25 '13 at 02:15

0

It works for me. Did you link to toastr and the css? I just tried this sample but passed in {} for the data (sine I dont have your self object). It works for me. See the jsbin here:

http://jsbin.com/uqudid/1/

answered Feb 25 '13 at 02:15

John Papa

21,880
4
61
60

score 0 · Answer 2 · answered Jul 15 '14 at 15:34

I actually had this same problem where toasts weren't showing in IE. In my case, the issue was actually with regard to the CSS not loading. In IE, I inspected the HTML and could see that the markup for the alert was there, but there were no styles for it. My app was a .NET MVC app and, after a little testing, I narrowed it down to IE seemingly not liking my toastr.css file being bundled with other files. Once I pulled the stylesheet out to its own bundle, everything worked. Strange...

score 0 · Answer 3 · answered Apr 11 '18 at 19:39

I had this issue for IE11, for all other browsers it worked, I was using "positionClass": "toast-bottom-full-width". Which caused major flickering on IE. I just left the position as the default(did not specify a positionClass) and now the issue is gone.

score 0 · Answer 4 · answered Jan 28 '20 at 12:43

I had the same problem as @im1dermike . The toast container was being shown in DOM, but the toast itself wasn't being displayed. (You can check if this is your case inspecting the DOM and looking for the text "toast-container", which the container div has).

I tried uncommenting polyfills lines and everything until I realized the toast was being set the property "display:none" for some reason by IE.

The thing that worked for me was just adding this to my styles.scss:

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  /* IE10+ CSS styles go here */

    .toast {
      display: block !important;
    }
}

@supports (-ms-accelerator:true) {


/* IE Edge 12+ CSS styles go here */ 

  .toast {
    display: block !important;
  }
}

toastr messages not displaying in IE

4 Answers4