Question

I have to buttons like this:

<input type='submit' id='submit' class='processAnimation'>
<input type='reset' id='reset' class='processAnimation'>

Now I have two js function. First function is called when ajax request is started and seconf function is called when ajax request is completed.

this.showLoading = function () {
     backupsource = $('.processAnimation').attr('class');
     $('.processAnimation').removeAttr('class').addClass('disabled-btn processAnimation');
     $('.processAnimation').attr( 'backupsource', backupsource );
}

this.hideLoading = function () {        
    backupsource = $('.processAnimation').attr('backupsource');
    if( backupsource != undefined ) {
       $('.processAnimation').removeAttr('class').addClass( backupsource );
       $('.processAnimation').removeAttr('backupsource');
    }   
}

EDIT: Above two functions are working and moving flower replaced clicked button. When request is complete then button is back. Problem is that when I click one button it replace all buttons(class=procesAnimation) with moving flower.

Thanks

Answer 1

Since you haven’t posted your click event binding I am going to take a quick guess and say that your selector is not set right or conflicts with another element. try something like this:

$('input').click(function(){
     switch( $(this).attr('id') ){
        case 'submit' :
            ShowLoading();
            break;
        case 'reset' :
            HideLoading();
            break;
      }
 });

and change the syntax of how you initialize the two functions to the following:

function ShowLoading(){
     //do your show loading procedure here
};

function HideLoading(){
    //do your hide loading procedure here
};