Toastr Growl is not showing up after a successful AJAX call

Question

Working through my JavaScript code, I'm able to get the alert for malformed URLs working but when a successful POST happened, I can get the response.id to show up via an alert call but not using the same toastr growl I used for my malformed URLs logic. Am I missing something?

<link href="http://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.css" rel="stylesheet"/>
<script src="http://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.js"></script>
<script type="text/javascript">
    $(function () {
        $('#submit').click(function () {
            var txt = $('#url').val();
            var re = /(http(s)?:\\)?([\w-]+\.)+[\w-]+[.com|.in|.org]+(\[\?%&=]*)?/
            if (!re.test(txt)) {
                toastr.options = {
                    "closeButton": false,
                    "debug": false,
                    "newestOnTop": false,
                    "progressBar": false,
                    "positionClass": "toast-bottom-center",
                    "preventDuplicates": false,
                    "onclick": null,
                    "showDuration": "300",
                    "hideDuration": "1000",
                    "timeOut": "5000",
                    "extendedTimeOut": "1000",
                    "showEasing": "swing",
                    "hideEasing": "linear",
                    "showMethod": "fadeIn",
                    "hideMethod": "fadeOut"
                };
                toastr["error"]("Invalid URL!");
                $('#url').val('');
                return false;
            }
            $.ajax({
                url: "{{ url_for('api.start_status') }}",
                type: 'POST',
                contentType: "application/json",
                dataType: 'json',
                data: JSON.stringify({"url": txt}),
                success: function (response) {
                    var meme = response.id;
                    toastr(meme);
                }
            });
        });
    });
</script>

UPDATE #1: As suggested, this is the code now and it still shows the same behavior. Confirmed that it also doesn't work in SAFARI so at least 2 browsers show the same issue.

<link href="http://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.css" rel="stylesheet"/>
<script src="http://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.js"></script>
<script type="text/javascript">
    $(function () {
        toastr.options = {
            "closeButton": false,
            "debug": true,
            "newestOnTop": false,
            "progressBar": false,
            "positionClass": "toast-bottom-center",
            "preventDuplicates": false,
            "onclick": null,
            "showDuration": "300",
            "hideDuration": "1000",
            "timeOut": "5000",
            "extendedTimeOut": "1000",
            "showEasing": "swing",
            "hideEasing": "linear",
            "showMethod": "fadeIn",
            "hideMethod": "fadeOut"
        };
        $('#submit').click(function () {
            var txt = $('#url').val();
            var re = /(http(s)?:\\)?([\w-]+\.)+[\w-]+[.com|.in|.org]+(\[\?%&=]*)?/
            if (!re.test(txt)) {

                toastr["error"]("Invalid URL!");

                $('#url').val('');
                return false;
            }
            $.ajax({
                url: "{{ url_for('api.start_status') }}",
                type: 'POST',
                contentType: "application/json",
                dataType: 'json',
                data: JSON.stringify({"url": txt}),
                success: function (response) {
                    toastr.success("Invalid URL 2!");
                    var meme = response.id;
{#                        alert(meme);#}
                }
            });
        });
    });
</script>

score 1 · Accepted Answer · answered Feb 24 '15 at 08:19

1

So you want to show the same toast whether there is a malformed url or a successful ajax call.

If I understood correctly then when I look at your code you seem to be putting the toastr.options only if the regex.test is unsuccessful

To test I would move the options outside the if(!re.test...)?

answered Feb 24 '15 at 08:19

vm2013

304
2
14

Also should you not put toastr["success"](meme) in your success handler of the ajax call? – vm2013 Feb 24 '15 at 08:24
Hmm... yeah, I tried that but to no avail. It works with the error but the successful call yields nothing. – Carlos Feb 24 '15 at 08:46
I thought I did put it in the successful handler part... I'm not very well versed with JS so if you can clarify, I'll greatly appreciate it. – Carlos Feb 24 '15 at 08:47
Through Chrome JavaScript console, I can SEE it's being called in both good and bad calls... it's just that it doesn't show up on a successful POST call... very odd. – Carlos Feb 24 '15 at 08:50
Your code shows toastr.success(). Is it toastr["success"] ? I refer to the link [http://codeseven.github.io/toastr/demo.html](http://codeseven.github.io/toastr/demo.html). Also is your javascript console showing any error? – vm2013 Feb 24 '15 at 09:06
According to sample code, you can use either `['error']` or `.error()`. Also, I have provided a screen cap of Chrome JS console at [snag.gy](http://snag.gy/lfITg.jpg). Object 1 is the failure and Object 2 is the success. It recognizes it but it just doesn't display it. – Carlos Feb 24 '15 at 09:19
Ok in your source I see this: {# alert(meme);#}. If it is there that creates a syntax error and should be replaced by //alert(meme). What if in the console you type toastr.success('test') ? – vm2013 Feb 24 '15 at 09:26
I removed that alert altogether and [tested via the console](http://snag.gy/to7eh.jpg) and you can see that it works. I appreciate the help. :) – Carlos Feb 24 '15 at 09:33
Glad it is sorted, I should have spotted this alert comment before, it is morning here not awake I think ;o) – vm2013 Feb 24 '15 at 09:36
Oh, I'm sorry vm2013, it still doesn't work. I was going to add [this screen cap](http://snag.gy/5VTCW.jpg) to show that the failure Object has its attributes defined whereas the success one doesn't. – Carlos Feb 24 '15 at 09:37
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/71566/discussion-between-vm2013-and-carlos). – vm2013 Feb 24 '15 at 09:46
No worries, I finally got it! Needed to add 'return false` right after the ajax call. Thanks for sticking it out with me. – Carlos Feb 24 '15 at 09:56
Great ;o) glad you sorted it. – vm2013 Feb 24 '15 at 10:10

Toastr Growl is not showing up after a successful AJAX call

1 Answers1