Modify HTML button's classes with Javascript upon clicking when button already bound to JS event

Question

Working on a slower, proprietary ecommerce platform and the client has requested that the call-to-action buttons on the site switch to spinner or loading animations after being clicked to reduce repeated submissions/clicks by the user. There is currently a good bit of delay between frontend interaction and backend results.

Almost all of the buttons are already bound to Javascript events to power their functionality. The loader animation is readily achievable by appending a new CSS class entitled "loading" to the button element.

HTML Button Example:

<button class="mz-button ui primary button" data-mz-action="next">Next</button>

HTML Button Example with Loading Animation:

<button class="mz-button ui primary button loading" data-mz-action="next">Next</button>

I think its best to avoid modifying the pre-existing Javascript methods/functions directly but what would be a "best practice" approach to append the "loading" class on button click but also ensure that the default button behavior is unaffected? From what I can tell, it seems that making use of this for specific button selection within the DOM might be smart.

As a secondary objective, it would be great if I could have this happen for any button site-wide.

Ashish Patel · Accepted Answer · 2016-10-05 12:28:12Z

1

you should create a function having a parameter of button element and other param which is needed by ajax. before the ajax call set the loader class to the button passed in parameter and as you get the response from server remove the loader class.

function eventhandler(ajaxParams,buttonObj){
    $(buttonObj).addClass("loader");
    jQuery.ajax({
          type: "post",
          url: url,
          data: ajaxParams,
          success: function(data) {
            $(buttonObj).removeClass("loader")
          },
          error: function(jqXHR,err) {
            $(buttonObj).removeClass("loader")
          }
      });
}

answered Oct 5, 2016 at 12:28

Ashish Patel

9411 gold badge10 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Abhishek Dhanraj Shahdeo · Accepted Answer · 2016-10-05 12:38:18Z

0

Yes, you are correct. Using this will remove the ambiguity of selections. You can avoid the modofication of pre-existing javascripts. Create new class names unique in the context that it doesn't coincide with others. Create custom functions and use them to serve your purpose. Use the classes with all your buttons and put them to work. If necessary make the use of the existing functions and don not forget to refactor. It will both speed up the site as well as help you in better understanding if the code written by you.

answered Oct 5, 2016 at 12:38

Abhishek Dhanraj Shahdeo

1,3662 gold badges14 silver badges35 bronze badges

Collectives™ on Stack Overflow

Modify HTML button's classes with Javascript upon clicking when button already bound to JS event

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related