Only Info toast type are shown

[gautamverma]

For me toaster only show the info message types irrespective of type.

I have tried calling it by

toaster.pop('warning', "Cancelled", "Grouping operation cancelled.");
toaster.pop({type:'error', title: "Error", body:"Oops...something broke. Please try again"});

Always show the green toast with the info icon.

Any idea why??

I have add all the dependices and module in my application but still nothing chnaged. Everytime i do a toaster.pop() it does display toast with the correct title and message but the same info one.

[tanou73]

Same problem for me.
Strange thing is that it was working til now (for about 2 month) and today I noticed I could only get info toast. Can't figure out what could have affect the directive behaviour...

[tanou73]

Hum... I dig a bit into it. That quite strange, when a toast is send:

• the event is well received
• it goes through add toast, and the type is good all the way ( let's say type = "success" )
• during the process, the type is transform from 'success' to 'toast-success' which is the corresponding class name
• it's end up adding the toast in the toaster array
  .. and then it begin to be weird: for an unknown reason the event is fired again, thus with the same toast (it does not go by the pop method which define the toast). But as the type has been transformed in "toast-success", the conversion doesn't recognize an 'existing type' and thus, apply the default type. 'info'. And then the toast appear, under the shape of an info toast.

I try to block any toast with a type like 'toast-*', and it's working. But I would prefere to understand why the hell the event is fired twice !!

[MarkNBroadhead]

I've been trying to figure this one out for a while. In my code, the issue only occurs under certain conditions. I am using modified meanjs scaffolding. The issue only appears immediately following authentication up until a page refresh.

In my testing, it appears that the event is not being fired twice.

$rootScope.$emit('toaster-newToast');

appears to only be firing off one time, however,

$rootScope.$on('toaster-newToast', function () {
    addToast(toaster.toast);
});

is receiving two events. The same toast object is sent to both of the events and only one ends up in the array. The second time addToast() is called, the toast type parameter is changed from "toast-success" or whatever it was converted to the first time to undefined. This causes both these lines to be run:

toast.type = mergedConfig['icon-classes'][toast.type]; 
if (!toast.type)
    toast.type = mergedConfig['icon-class'];

Like tanou73 mentions, blocking toasts in the icon-classes array will solve the issue, however, the root cause lies in the 'toaster-newToast' event being received twice.

[MarkNBroadhead]

This issue is being caused by the directive being instantiated twice. A comment found on this stackoverflow led me to the answer.

Beware that $rootScope lives forever. If your controller is run twice, any $rootScope.$on inside it will be run twice, and caught events will result in a callback invoked twice. If you use $scope.$on instead, the callback will be destroyed along with your controller implicitly by AngularJS.

Since $rootScope is being used for both $emit and $on, when the directive is instantiated twice, there will be two $rootScope.$on() calls made for the same $emit. As a result, toaster.js's addToast() is processed twice, changing type from an example "success" to "toast-success" and then "toast-success" to undefined.

To resolve this, you may want to just move the $on out to a service/factory really since they are singletons.

[gautamverma]

is this changes implemented in the toaster js??

[jirikavi]

Hi,
Thank you all for your investigation. The fix is done in the latest release.
Jiri.

[briangullo]

This appears to still be a a problem for me. I have the tried the following two ways:

toaster.error('Title', 'This is a message');
toaster.pop({type: 'error', title: 'error title', body: 'This is an error.'})

And both ways show me an info toast.

I'm using v0.4.16,
with the Angle-Template (latest version).

Thanks!
Brian

[Stabzs]

@briangullo Do you have two instances of <toaster-container></toaster-container> without unique IDs? That can cause the type of issue you are having.

If you could please create a plnkr or a jsfiddle that demonstrates the issue, I'd be happy to look at it.

[briangullo]

Hi @Stabzs , thanks for responding so quickly. I put together a plunker. I'm not sure how helpful it will be, because it is only a piece of a much larger application. http://plnkr.co/edit/V4vuj5mBy4duyerlk23d?p=preview

Maybe you could give it a quick glance and see if there is anything obvious.

Also, I'm getting this error: [$sce:itype] Attempted to trust a non-string value in a content requiring a string: Context: html

TIA,
Brian

[Stabzs]

@briangullo No problem, happy to take a look.

The plnkr you linked works just fine after I added an ng-controller reference to it: http://plnkr.co/edit/desZfldVJnTwvmWgEw1O?p=preview

I would check your application first to make sure that you are reusing the same toast container instances. Make sure that the toast container is not nested WITHIN any routed templates, since this will cause the container to be rebuilt every time your template changes. You should always nest it outside of ng-view/ui-router directive, unless you are explicitly targetting an inner toast-container instance by id. I would also make sure that you are always firing toast calls from within an Angular context, not from native DOM events or jQuery calls.

Lastly, if you are getting an $sce error, make sure that you are using a bodyOutputType of "trustedHtml".

If none of that helps, try to create a full example of the issue you are seeing in a plnkr and I can point you in the right direction.

[briangullo]

@Stabzs , Ok, thanks for the info, I will check it out and let you know what i find.

[briangullo]

@Stabzs , just wanted to let you know, it was an issue with my routing. The way I was combining the asp.net views and the angle routes was calling the same page twice. Thanks!

[Stabzs]

@briangullo Thanks for confirming! Glad to hear you were able to work it out.

[ignacio-chiazzo]

There isn't a better solution to this Issue? I got the error "Error: [$sce:itype] Attempted to trust a non-string value in a content requiring a string: Context: html", because I have twice instance of toaster. How can I fix it? (other solution than name different toaster)

PD : I have the version 0.4.18, and I get the error, so the Issue is not fixed

[Stabzs]

@ignacio-chiazzo In either case, there isn't a bug. It's a matter of using the correct APIs.

First off, if you are getting the error you reported, it is because you are attempting to inject html content into your toast without using a bodyOutputType of "trustedHtml". You can configure this as a global option per toast container or on a per toast basis, per the Body Output Type section of the README.

As for using more than one container, you absolutely can use more than one container. However, if you do not use unique toasterids per container and you do not target those ids, your toasts will naturally be broadcasted to all available toast containers since you haven't specified which container to target.

[ignacio-chiazzo]

@Stabzs Thanks for responding so quickly! Can you give an example how to work with two ids, ?

[Stabzs]

@ignacio-chiazzo not a problem!

I created an example plnkr here: http://plnkr.co/edit/4ICtcrpTSoAB9Vo5bRvN?p=preview
for this closed issue: #181.

It should give you exactly what you need for working with two unique container ids.

[matthieu-D]

This should be in the documentation.

[Stabzs]

@matthieu-D Which part are you referring to? IDs for toaster containers? Thanks

[matthieu-D]

Yes ids.

[Stabzs]

@matthieu-D documentation has been added. Please review it and let me know if anything is unclear.

[matthieu-D]

Perfect.

[pablobarba]

Hi, i implemented the version 3.0.0 and, in my case, this error continues.

there are two identicals newToastEventSubscribers when finished this loop

$rootScope.$on(
'toaster-newToast', function (event, toasterId, toastId) {
for (var i = 0, len = newToastEventSubscribers.length; i < len; i++)
{
newToastEventSubscribers[i](event, toasterId, toastId);
}
});

then function addToast(toast, toastId) is call twice.

toast.type = mergedConfig['icon-classes'][toast.type];
if (!toast.type) {
toast.type = mergedConfig['icon-class'];
}

In the firt call the lines recovery the type toast-success from dictionary mergedConfig, but in the second call the type is already toast-success and the map fail.
From result i have a toast-info.