ГЛОБАЛЬНАЯ загрузка внутри каждой кнопки с помощью Jquery в ajax вызовах asp.net mvc

Question

У меня есть следующий сценарий: У меня есть кнопка \ ссылка с изображением внутри, как это:

<button type="submit" id="myButton" class="button"><img src="../../Content/images/check.png" id="defaultImage"  />
SaveData!!!</button> 

Мы в порядке здесь! Теперь, что мне нужно сделать, это: Я хочу по щелчку, чтобы изображение изменилось для загружаемого элемента, который ранее был загружен на страницу, например:

<img id="loadingImage" src="../../Content/images/loader.gif" style="display: none;"  alt="loading"/>

А потом, когда загрузка завершится, верните старый образ кнопки, я закончил с этим кодом:

function loader() {
    var $button = $('#myButton');

    if (btnState == '1') {
        $button.find('img').hide();
        $button.prepend($('#loadingImage'));
        $('#loadingImage').css({ 'display': 'inherit' });
        btnState = '0';
    }
    else {

        $button.find('img').hide();
        $button.prepend($('#defaultImage'));
        $('#defaultImage').show();

        btnState = '1';
    }

}

Это делает трюк для ОДНОЙ ОДНОЙ кнопки (так как я передаю ее идентификатор в функции), но, когда у меня есть, например, сетка с кнопкой в ​​каждой строке, я обнаружил, что неактивен, когда управляю экраном со многими кнопками, чтобы сделать это для каждый из Основной вопрос: как я могу сделать этот метод общим для всех кнопок / ссылок в одном конкретном классе на странице? Цель: нажать кнопку, получить изображение, изменить его и остановить (можно вручную). Я просто не хочу подключать ВСЕ кнопки.

Answer 1

Вы должны сделать что-то подобное, это предотвратит двойную отправку пользователем:

$('.button').click(function(evt) {
    evt.preventDefault();    
    var button = this;
    hideButton(button);
    $('ID or CLASS').load('AJAX FILE URL', function() {
         //On success, show button remove image
         showButton(button);
    });
});

function hideButton(button) {
    $(button).hide().after('<img src="../../Content/images/loader.gif" alt="loading"/>');
}

function showButton(button) {
    $(button).next('img').hide();
    $(button).show();

}

Весь код выше должен быть в $ (document) .load

Ваш HTML должен выглядеть так:

<button type="submit" class="button"><img src="../../Content/images/check.png"   />SaveData!!!</button>

Идентификаторы больше не нужны.