JavaScript: function does not work without warning ()

Question

Possible Solution

Hi fellow programmers!

I am writing to you to request some help on a problem that I recently experienced. The problem itself is this:

1) I have an ajax request implemented using jQuery.

2) After returning a successful script response, you should reload the page with the appropriate changes and, if there are any validation errors, insert them after the hidden field used to store non-critical different data. If there are validation errors, the changes are not saved, and the page simply reloads with validation error messages. The check itself is checked by the servlet.

3) I noticed that everything works fine when some kind of alert () is presented before actually adding error messages, but I do not want to have such a warning.

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: what deal with alert () makes it work?

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

On Chrome, this does not work.

In FF, it only works if there is some warning ().

Thanks in advance!

Answer 1

Thanks to all the answers and answers, in particular, I managed to get it to work. Obviously, something asynchronous happened in randomFunctionToReloadThePage (), and I was able to fix it using the method . AjaxStop ().

Edit: A second error was detected when using ajaxStop (). The solution that I found working correctly is as follows:

1) Add an extra parameter to randomFunctionToReloadThePage

2) Call the function with an additional parameter on the corresponding page.

Answer 2

The alert() function blocks code execution and delays the processing of javascript code at the bottom. This may give time for the ajax request to complete.

Answer 3

This is not an answer, but a review for debugging (I can not do the correct formatting of the code in the comment).

Add these two calls after alert() :

 console.log( "errors:", errors ); console.log( "hidden:", $('#idOfTheHiddenField')[0] ); 

Leave the warning off and run. What does it show in the developer console?

Then, for comparison, uncomment the warning, so it runs before these two calls and launches it in Firefox. Now what is in the console?

Answer 4

try adding: cache: false

 $('#randomFormElement').submit(function() { $(this).ajaxSubmit({ cache: false, 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. } }); 

});