Progress bar not hiding

Sample code:

    
    Please wait while Processing Payment...



    Pay

function SaveInvoice() {
    // code to save the invoice

    // display progress message
    displayprogressmessage(document.getElementById('submitButton'), 'Saving...');
}

function displayprogressmessage(button, message) {
    // code to display progress bar and message
}

.

the progress bar will only display after the SaveInvoice function is called, and the displayprogressmessage function is called within it.

The way the displayprogressmessage function is being called, It's possible that the function is being called before the button is clicked, which is why the progress bar is always spinning. One solution could be to remove the onclick attribute from the button and instead call the displayprogressmessage function within the SaveInvoice function after the save operation is complete. This way, the progress bar will only display after the button has been clicked and the save operation is actually in progress.

Hello

You need to hide the spinner on the complete of SaveInvoice method.

once invoice save changes are completed and response back from the server need to add the below code.

$(".submit-progress").addClass("hidden");

Thanks

Vishal

Swain,  please I did the changes as you stated here but is still not working

function displayprogressmessage(ctl, msg) {
    $(ctl).prop("disabled", true).text(msg);
    $("body").addClass("submit-progress-bg");
    // Wrap in setTimeout so the UI
    // can update the spinners
    setTimeout(function () {
        $(".submit-progress").removeClass("hidden");
    }, 1);
    return true;
}

// Add this script to hide the progress bar by default
$(document).ready(function() {
    $(".submit-progress").addClass("hidden");
});

    
    Please wait while Processing Payment...



    Pay

Based on the code you provided, it seems that the progress bar is always displayed because the CSS class "hidden" is not being added to the progress bar initially. You can try adding the "hidden" class to the progress bar div by default and then removing it only when the button is clicked.

Hello Swain,

This is my javascript code

It looks like there might be a syntax error in your code. The onclick attribute in your button element is not closed properly.

Try replacing your button element with the following code:

    Pay

Also, make sure that your JavaScript function displayprogressmessage is properly defined and included in your code.

If the issue still persists, you can try using the addEventListener method in your JavaScript code instead of the onclick attribute in your HTML. Here is an example:
 

document.getElementById("submitButton").addEventListener("click", function() {
  displayprogressmessage(this, 'Saving...');
});