Question

当ajax返回成功的响应时，这很好

<span class="message success visible">
    <div id="portrait">
        <img src="/zp/pngFiles/9158976683328087458.png">
    </div>
</span>

但我遇到的问题是，如果在成功事件之前发生了先前的错误。

<span class="message success failure visible">
    <div id="portrait">
        <img src="/zp/pngFiles/2242799749221179588.png">
    </div>
</span>

正如您所看到的那样，span类被搞砸了并且没有刷新，不确定如何在错误和ajax成功响应之前重置span。

以下是我的 main.js

if (form.valid()) {

    var data = 'dmc=' + encodeURIComponent(dmc.value) + '&printerurl=' + encodeURIComponent(printerurl.value);
    $.ajax({
        url: "preview",
        data: data,
        type: "POST",
        beforeSend: function() {
            $('#preview').attr("disabled", true); // disable button 
        },
        success: function(response) {
            //form.trigger("reset"); DONT WANT TO CLEAR FORM
            var previewList = "<div id=\"portrait\">";
            $.each(response, function(index, value) {
                previewList += "<img src =\"/zpa/pngFiles/" + value + "\">";
            });
            $message._show('success', previewList + "<\div>");
            $('#preview').attr("disabled", false); // enable button
            $('#loading').hide();
        },
        error: function(xhr, status, error, exception, message) {
            $('#loading').hide();
            var errorMessage = "error : " + xhr.responseJSON.error + "<br>" +
                "status : " + xhr.responseJSON.status + "<br>" +
                "message : " + xhr.responseJSON.message + "<br>" +
                "exception : " + xhr.responseJSON.exception;

            $message._show('failure', errorMessage);
            $('#preview').attr("disabled", false); // enable button
        }
    });

}

修改

css代码：

form .message {
            text-decoration: none;
            -moz-transition: opacity 0.2s ease-in-out, -moz-transform 0.2s ease-in-out;
            -webkit-transition: opacity 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
            -ms-transition: opacity 0.2s ease-in-out, -ms-transform 0.2s ease-in-out;
            transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
            -moz-transform: scale(1.05);
            -webkit-transform: scale(1.05);
            -ms-transform: scale(1.05);
            transform: scale(1.05);
            height: 2.75em;
            line-height: 2.75em;
            opacity: 0;
        }

            form .message:before {
                -moz-osx-font-smoothing: grayscale;
                -webkit-font-smoothing: antialiased;
                font-family: FontAwesome;
                font-style: normal;
                font-weight: normal;
                text-transform: none !important;
            }

            form .message:before {
                margin-right: 0.5em;
            }

            form .message.visible {
                -moz-transform: scale(1);
                -webkit-transform: scale(1);
                -ms-transform: scale(1);
                transform: scale(1);
                opacity: 1;
            }

            form .message.success {
                color: #1cb495;
            }

                form .message.success:before {
                    content: '\f00c';
                }

            form .message.failure {
                color: #ff2361;
            }

                form .message.failure:before {
                    content: '\f119';

}

Answer 1

在发送ajax请求之前，请将css类重置为默认状态。那么你应该没有问题正确地添加成功和失败类。

HTML：

import numpy as np
a = np.arange(10)
a = np.ma.masked_less(a, 3) & np.ma.masked_greater_equal(a, 8)

脚本：

<div id="feedback" class="message visible">
     <div id="portrait">
         <img src="/zp/pngFiles/9158976683328087458.png">
     <div>
</div>

当ajax响应成功时，清除jquery成功/错误消息span class

1 个答案: