Question

我的网页上有一个按钮生成如下：

<div class="btn2" id="btPost" onclick="$('#Delete').val('False'); ValidateFormAndAjaxSubmit('frmEditPost', this);" onmousedown="this.className='btn2_click';" onmouseout="this.className='btn2';" onmouseover="this.className='btn2_hover';" onmouseup="this.className='btn2_hover';">
 <span>Posta</span>
</div>

当我有这个javascript：

function ValidateFormAndAjaxSubmit(formId, callingElement) {

    if (IsNotDblClick(callingElement.id)) {
        var _form = $("#" + formId);

        var validator = _form.validate();
        var anyError = false;

        anyError = !_form.valid();

        if (anyError) {
            window.latestClick = '';
            return false; // exit if any error found    
        }

        $.post(_form.attr("action"), _form.serialize(), function (data) {

            if (data.success && data.redirectUrl.length > 0) {
                window.location.href = data.redirectUrl;
            }
            else {

                var isValid = validateResponse(_form, data);

                window.latestClick = '';
            }
        })
    }
}

这工作正常，但问题是我想向最终用户显示表单正在加载。最好的解决方案可能是简单地从网页中删除callingElement并将其替换为临时禁用（特殊CSS）按钮。按钮需要返回，然后完成ajax方法。

我知道这个：

$("#regTitle").html("Hello World");

但它只是替换了div的内部部分，我还需要存储当前标记，以便在完成ajax调用时返回。

如果跨度内的文本也放在临时按钮上也是好的。

问题是我如何尽可能简单地做到这一点？

Answer 1

试试这个

$.ajax({
    'type': 'POST',
    'url': _form.attr("action"),
    'data': _form.serialize(),
    'beforeSend': function() {
        $('.btn2').hide();
        $('#regTitle').html('Loading ...');
        $('#regTitle').show();
    },
    'success': function() {
        $('.btn2').show();
        $('#regTitle').hide();
    },
    'error': function() {
        $('.btn2').show();
        $('#regTitle').html('Error ...');
    }
});

Answer 2

这就是我解决它的方法：

在这样的情况下生成额外隐藏的div：

<div class="loadingDiv" id="loadingDiv_btPost"></div>

使用以下css：

.loadingDiv {
    float:                  left;
    display:                none;
    height:                 26px;
    width:                  60px;
    background:             url("images/animations/ajaxLoader.gif") no-repeat;
    background-position:    center center;
}

然后改变了这样的javascript：

function ValidateFormAndAjaxSubmit(formId, callingElement) {

    if (IsNotDblClick(callingElement.id)) {

        var _form = $("#" + formId);

        var validator = _form.validate();
        var anyError = false;

        anyError = !_form.valid();

        if (anyError) {
            window.latestClick = '';
            return false; // exit if any error found    
        }

        $('#' + callingElement.id).hide();
        $('#loadingDiv_' + callingElement.id).show();
        $.post(_form.attr("action"), _form.serialize(), function (data) {

            $('#loadingDiv_' + callingElement.id).hide();
            $('#' + callingElement.id).show();
            if (data.success && data.redirectUrl.length > 0) {
                window.location.href = data.redirectUrl;
            }
            else {

                var isValid = validateResponse(_form, data);

                window.latestClick = '';
            }
        })
    }
}

在ajax调用之前替换按钮，然后在调用之后恢复

2 个答案: