When I trigger a save action, a hidden div is supposed to appear. The structure of this div is like so:
<div class="Working" style="display: none;">Message</div>
As part of the save process in my code, the following logic is implemented:
function SaveData() {
var cancelSave = false;
$('.Working').text('Saving data ...').show();
var saveData = { 'Data': myData }; // Contains complex logic
if (cancelSave) {
$('.Working').hide();
} else {
$.ajax({
// Various configurations
async: false,
error: function (rsp) {
$('.Working').hide();
},
success: function (rsp) {
$('.Working').text('Saved');
$('.Working').fadeOut(5000, DoNothing());
}
});
}
}
function DoNothing() {
// This function is empty
}
During debugging, the div appears as intended right after the .show() command is executed. However, when running the code at normal speed, the "Saving data ..." message does not display. The saving process takes around 5-7 seconds, providing ample time for the message to show up.