I find it peculiar and am actively seeking an explanation for this anomaly. In my code snippet, the AJAX call seems to be causing unexpected behavior:
$('.edit-config').click(function() {
var that = this;
var msg;
ipt = $(this).closest('tr').find('input');
$.ajax({ url: ajaxurl,
method: 'POST',
data: { 'action' : 'config_update', 'name' : ipt.attr('name'), 'val' : ipt.attr('value') },
beforeSend: function ( ) { $(that).addClass('updating').text("Updating ... "); },
complete: function ( ) { $(that).removeClass('updating').text("Update"); },
success: function ( submitted ) {
if ( submitted === 'true' ) { msg = "Successfully updated configuration in database"; }
else { msg = "Error when trying to update database"; }
},
error: function ( ) { msg = "Unspecified internal error"; }
});
alert(msg); // This line may execute before AJAX is completed
});
To ensure that alert(msg); is only called after the completion of $.ajax(...), I decided to introduce the async: false parameter. However, upon implementing this change, I observed that the CSS styling associated with addClass('updating') was no longer being applied as expected. Interestingly, this styling did appear correctly when the default value of async was set to true.