7

I'm trying to redirect after toastr notification finishes displaying. I currently have ajax request as 

 $.ajax({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="_token"]').attr('value')
            },
            type: $(form).attr('method'),
            url: $(form).attr('action'),
            data: $(form).serialize(),
            dataType: 'json',
            success: function (data) {
                toastr.success('Hello','Your fun',{timeOut: 2000,preventDuplicates: true, positionClass:'toast-top-center'});


                     return window.location.href = '/';

            },
            error: function (data) {
                    var html = '<div class="alert alert-danger">Email/Password is invalid</div>';
                    $('#loginMsg').html(html);
            }

The problem is it shows the notification but redirects to quickly to actual read the notification. How can I redirect only after toastr notification hides?

Eric Evans
  • 640
  • 2
  • 13
  • 31
  • If you're redirecting anyway, the idea of making an AJAX request and showing the notification seems completely redundant. – Rory McCrossan Sep 01 '16 at 14:01
  • Why would this be redundant. A person logins and before it redirects to homepage its shows a notification of a successful login. I've seen this on plenty of sites. But even if redundant that's not really the purpose of my question. – Eric Evans Sep 01 '16 at 14:05
  • Ok, first to answer the question, use the `onHidden` callback. See the 'callbacks' section of the documentation: https://github.com/CodeSeven/toastr. Secondly, making an AJAX request then showing a notification is redundant if you're going to redirect anyway. Instead of making a single request you've made two and held up your user while they waited for the notification to go away. The fact that the page changes when you successfully provide your credentials is clue enough to the user that they have logged in. – Rory McCrossan Sep 01 '16 at 14:07
  • Thanks for the info makes since but I'm testing toastr right now and I might not use it for login. Just testing, but you make a good point.\ – Eric Evans Sep 01 '16 at 14:15

3 Answers3

9

toastr gives the callback options

toastr.options.onShown = function() { console.log('hello'); } toastr.options.onHidden = function() { console.log('goodbye'); } toastr.options.onclick = function() { console.log('clicked'); } toastr.options.onCloseClick = function() { console.log('close button clicked'); }

inside the function you can use redirect URL

it depends on the plugin which your using check here

Hoppe
  • 6,508
  • 17
  • 60
  • 114
nmanikiran
  • 2,866
  • 15
  • 19
6

I hope this helps

$.ajax({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="_token"]').attr('value')
        },
        type: $(form).attr('method'),
        url: $(form).attr('action'),
        data: $(form).serialize(),
        dataType: 'json',
        success: function(data) {
            toastr.success('Hello', 'Your fun', {
                timeOut: 2000,
                preventDuplicates: true,
                positionClass: 'toast-top-center',
                // Redirect 
                onHidden: function() {
                    window.location.href = '/';
                }
            });
        },
        error: function(data) {
            var html = '<div class="alert alert-danger">Email/Password is invalid</div>';
            $('#loginMsg').html(html);
        }
    });
Ferdy
  • 61
  • 1
  • 2
0

//Before calling the toastr method, define the callback function to reload page or redirect to onother url

toastr.options.onHidden = function(){
  window.location.reload();
}

//Call de toast
toastr.error('Your massage here');
megavado
  • 1