【问题标题】:Toastr Growl is not showing up after a successful AJAX call成功的 AJAX 调用后没有显示 Toastr Growl
【发布时间】:2015-02-24 08:12:19
【问题描述】:

通过我的 JavaScript 代码工作,我能够获得格式错误 URL 的警报,但是当一个成功的 POST 发生时,我可以通过 alert 调用显示 response.id,但不使用相同的 toastr我用于我的格式错误的 URL 逻辑的咆哮。我错过了什么吗?

<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>

更新 #1: 正如建议的那样,这是现在的代码,它仍然显示相同的行为。确认它在 SAFARI 中也不起作用,因此至少有 2 个浏览器显示相同的问题。

<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>

【问题讨论】:

    标签: javascript jquery python ajax toastr


    【解决方案1】:

    因此,无论是格式错误的 url 还是成功的 ajax 调用,您都希望显示相同的 toast。

    如果我理解正确,那么当我查看您的代码时,您似乎只在 regex.test 不成功时才放置 toastr.options

    为了测试,我会将选项移到 if(!re.test...) 之外?

    【讨论】:

    • 您也不应该将 toastr["success"](meme) 放入 ajax 调用的成功处理程序中吗?
    • 嗯...是的,我尝试过,但无济于事。它可以处理错误,但成功的调用不会产生任何结果。
    • 我以为我确实把它放在了成功的处理程序部分......我对 JS 不是很精通,所以如果你能澄清一下,我将不胜感激。
    • 通过 Chrome JavaScript 控制台,我可以看到它在好的和坏的调用中都被调用了......只是它没有出现在成功的 POST 调用中......非常奇怪。跨度>
    • 您的代码显示 toastr.success()。是 toastr["success"] 吗?我参考链接http://codeseven.github.io/toastr/demo.html。您的 javascript 控制台是否也显示任何错误?
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2015-07-12
    • 2021-07-19
    • 1970-01-01
    • 2021-10-02
    • 2013-07-26
    • 2015-08-27
    • 1970-01-01
    相关资源
    最近更新 更多