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

これは正常に機能していますが、問題は、フォームが読み込まれていることをエンドユーザーに示したいことです。最善の解決策は、callingElement を Web ページから単純に削除し、一時的に無効化された (特別な CSS) ボタンに置​​き換えることです。ボタンが戻る必要があり、その後 ajax メソッドが実行されます。

私はこれについて知っています：

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

しかし、それはdivの内部部分を置き換えるだけであり、ajax呼び出しが完了したときに戻ることができるように現在のマークアップを保存する必要もあります.

スパン内のテキストが一時的なボタンにも配置されるとよいでしょう。

問題は、これをできるだけ簡単に行う方法です。

4

2 に答える 2

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 に答える
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 に答える