Search code examples
javascriptjquerypythonajaxtoastr

Toastr Growl is not showing up after a successful AJAX call


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>

Solution

  • 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...)?