Prompt a toast to come up via a function

design material
1

Hi! I’m using your framework for a project and I’m wondering if you could help me out with something.

I’m looking at this page (http://daemonite.github.io/material/ui-modal.html) and LOVE the toast with action button. But I’m wondering… how can I prompt a toast to come up via a function? I don’t want a button that I have to click - I want a toast to pop up when a condition is true, sort of like an “alert”.

Is there a function that I can execute that would bring up a toast?

Thanks!

1 Like
2

Same question from my site - it’s not useful to have a button to initiate a toast.
In addition no basic documentation is available.
As there is no answer it seems it’s not a supported framework…

Simple questions should be possible to be answered within some days.
Of course you do not have the time to answer complex one, but missing answers to such simple basic questions give a bad feeling…

Best regards.

3

current toast is based on bootstrap’s tooltip javascript and unfortunately it cannot be trigged via a simple function now.

current toast is mainly to provide the styles, and the javascript side of it certainly needs improvement in future releases. for example, replace triggering with bootstrap’s tooltip javascript with something more like this: https://github.com/CodeSeven/toastr

1 Like
4

O.k. many thanks for the information.
But a simple sentence in the demo would easily document it :wink:
So using a 3rd party tool is necessary… Will check this out.

5

This is a function i wrote on a backbone view, passing a settings object: Formatting is a bit off but you can try this, ‘js-submit’ class relates to a class on the submit button, but try and see what happens.

                reportNotify({
                    header_text: "Form input errors",
                    message_text: 'Form has input errors',
                    message_type: "icon positive"
                });

    <code>function reportNotify(settings){
                //alert('notify')
                //alert(settings.message;_text);
                $('.js-submit').tooltip({
                    animation: false,
                    container: '.toast',
                    html: true,
                    placement: 'bottom',
                    template: '<div class="tooltip"><div class="toast-inner tooltip-inner"></div></div>',
                    trigger: 'manual',
                    title: settings.message_text
                });

                if (!$('.toast').length) {
                    $('body').append('<div class="toast"></div>');
                }else{
                   // alert('removing the toast from the dom');
                    $('.toast').remove();
                    $('body').append('<div class="toast"></div>');
                };

                //$('.js-submit').text('saving...');
                $('.js-submit').tooltip('show').addClass('toast-toggled');

                $('.toast-inner').html(settings.message_text);
                $('.toast').addClass('toast-show');

                if ($(window).width() < 768 && $('.fbtn-container').length) {
                    $('.fbtn-container').css('margin-bottom', $('.toast').outerHeight());
                };

                $('.toast-inner').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) {
                    toastHide(6000);
                });
                logger.debug('reportNotify', 'settings', settings);
            }</code>
1 Like