0

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

<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 = '';
            }
        })
    }
}

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

我知道这一点：

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

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

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

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

4

2 回答 2

0

尝试这个

$.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 ...');
    }
});
于 2013-09-21T09:22:32.967 回答
0

这就是我解决它的方法：

在底部生成额外的隐藏 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 = '';
            }
        })
    }
}
于 2013-09-21T09:52:23.530 回答