JavaScript: function not working without alert()

Question

Possible solution

Hello, fellow programmers!

I am writing to you in order to request some help with an issue I recently experienced. The very issue is as follows:

1) I have an ajax request, implemented with jQuery.

2) After returning a successful response, the script should reload the page with the respective changes and if there are any validation errors, insert them after a hidden field, used to store non-critical miscellaneous data. If there are any validation errors, the changes are not saved and the page is just reloaded with the validation error messages. The validation itself is taken care of by a servlet.

3) I noticed that everything works fine, when any kind of alert() is presented before the actual appending of the error messages, but I do not want to have such an alert.

Here is the JavaScript code:

$('#randomFormElement').submit(function() {
        $(this).ajaxSubmit({
            success: function (data, status) {
                randomFunctionToReloadThePage(arg1, arg2, arg3);
                var errors = $(data).find('.classNameOfTheErrors').xml();
                //alert(something);
                $(errors).insertAfter('#idOfTheHiddenField');
            },
            error: function (jqXHR, textStatus, thrownError) {
            //Error handling if the ajax response fails.
            }
         });
});

So, the main question is: what's the deal with alert() making it work?

==========================

On Chrome, it doesn't work either way.

On FF, it does work only when some alert() is present.

Thanks in advance!

Answer 1

The alert() function blocks the code execution and delays the processing of the javascript code on bottom of it. This could give time to the ajax request to complete.