GLOBAL loading inside each single button with Jquery in ajax calls of asp.net mvc

Question

I have the following scenario: I have a button\link with a image inside like this:

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

We are OK here! Now what I need to do is: I want on the click that the image change for a loading element that is previously loaded in the page like this:

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

And then when the load complete turn back the old button image, I ended with this code:

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

}

This does the trick for ONE SINGLE button(since I pass its ID in the function) but, when I have for example a grid with a button on each line, I found inviable when managing a screen with many buttons do this for each of then. The main question is: How can I make this method general for all buttons/links on one specific class in the page? The goal is: Click a button, get the image and change it and stop(can be manual). I just don't wanna have to Hook ALL buttons.

Answer 1

You should do something like this, it will prevent the user from double submitting:

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

}

All of the code above should be in the $(document).load

Your HTML should look like:

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

There is no need for Id's now on anything.