Заменить кнопку перед вызовом ajax, а затем вернуться назад после вызова

Question

Заменить кнопку перед вызовом ajax, а затем вернуться назад после вызова

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-вызов.

Было бы также хорошо, если бы текст в пределах диапазона был помещен также на временную кнопку.

Вопрос в том, как я делаю это как можно проще?

Banshee 21 сен. 2013, в 11:46

Источник

Теги:

javascript

jquery

html

css

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

Alex Tselegidis 21 сен. 2013, в 06:57

Ещё вопросы

Banshee · Accepted Answer · 2013-09-21T08-08-00.000Z

Вот как я это решил:

Сгенерируйте дополнительный скрытый div под botton следующим образом:

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