Script wont show hidden element when 'hidden' class is removed

Question

I have the following function:

function submitForCorrection() {
    try {
        $("#uploadSpinner").removeClass("hidden");
        setTimeout(function() {}, 100);
        SubmitForm('BoqReviewForm',
            'boqReviewTable',
            '@Url.Action("PostBoqFlags", "ProjectAuthority")',
            '@Url.Action("GetBoqReview", "ProjectAuthority")',
            function() { showNotification('Correction requested.', 'success'); },
            null,
            'Requesting correction. Please wait',
            false);
    } finally {
        $("#uploadSpinner").addClass("hidden");
    }
}

The SubmitForm call is rather timeous, hence me wanting to show a 'spinner' while it executes. Yet it's as if my

$("#uploadSpinner").removeClass("hidden");

line of code is totally ignored.

I know the spinner is in the correct place, because if I put a breakpoint on the removeClass line and manually remove the hidden class in Chrome dev tools, the spinner shows up exactly where I want it.

I've added the setTimeout(function() {}, 100); in the vain hope that removing the hidden class may take some time, and I wanted to avoid the SubmitForm call executing before the spinner is visible.

Why is my code behaving as if the removeClass isn't even there?

Answer 1

It may appear that the class isn't removed but in reality you are removing the class then adding it back to the element instantly.

In your try catch you have

} finally {
  $("#uploadSpinner").addClass("hidden");
}

and finally will always run right after your try block has finished.

As stated on MDN:

finally_statements:

Statements that are executed after the try statement completes. These statements execute regardless of whether an exception was thrown or caught.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/try...catch

So your code is running the try block which will remove the class but then it is just adding it back instantly in your finally block. This is happening because setTimeout and I assume your SubmitForm function are both asynchronous.

You will need to return a callback or a Promise from your SubmitForm function so you can then remove the loader after the form has finished submitting.

You should be able to fix this by changing your function to this

function submitForCorrection() {        
  $("#uploadSpinner").removeClass("hidden");
  setTimeout(function() {
    SubmitForm('BoqReviewForm',
      'boqReviewTable',
      '@Url.Action("PostBoqFlags", "ProjectAuthority")',
      '@Url.Action("GetBoqReview", "ProjectAuthority")',
      function() {
        showNotification('Correction requested.', 'success');
        $("#uploadSpinner").addClass("hidden");
      },
      null,
      'Requesting correction. Please wait',
      false
    );
  }, 100);
}

Answer 2

instead of removing the class, perhaps you should try to change the "display" attribute of the spinner from "none" to "block"

2 ways of doing it is as follow:

$("#uploadSpinner").css("display", "block");

or

$('#uploadSpinner').show();