JavaScript: function not working without alert()

Question

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!

What does `randomFunctionToReloadThePage` do? If any part of it is asynchronous, the delay introduced by the alert might make a difference. — Thilo, Jul 31 '13 at 07:55
Just as a side note. If you reload your page after an ajax request? Why then do you perform an ajax request in the first place. Why not submitting the whole page and then you don't have to reload it. — roel, Jul 31 '13 at 07:57
is your page getting refreshed before the ajax call completes? are you trying to submit the form by ajax? — Ayyappan Sekar, Jul 31 '13 at 07:59
to the question itselfs: is your page fully reloaded when you perform the insertAfter? — roel, Jul 31 '13 at 07:59
@roel: I am reloading only part of the page, not the whole of it. — Aleksander Panayotov, Jul 31 '13 at 08:00
@Thilo: the randomFunctionToReloadThePage() is not asynchronous. — Aleksander Panayotov, Jul 31 '13 at 08:04
@AyyappanSekar: Ain't the page supposed to reload ONLY if the ajax response is successful and present? I mean, it is located in the success() function. — Aleksander Panayotov, Jul 31 '13 at 08:04
Use `.ajaxComplete()` http://api.jquery.com/ajaxComplete/ ?? — gvee, Jul 31 '13 at 08:49
What's wrong with using ajaxSubmit()? It does pretty much the same, since the "success" function is called only when the event is successful and completed. — Aleksander Panayotov, Jul 31 '13 at 08:53
[Don't use `alert()` to test your Javascript code](http://spudley.com/blog/dont-use-alert-to-test-your-javascript-code) — Spudley, Jul 31 '13 at 09:01

score 5 · Answer 1 · answered Jul 31 '13 at 07:56

5

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.

answered Jul 31 '13 at 07:56

mornaner

2,424
2
27
39

It's in the `success` function of the ajax call, this means that the call is already completed at this point for sure. – UweB Jul 31 '13 at 08:02
1

@UweB: That first call is done, but maybe `randomFunctionToReloadThePage` also does something in the background. – Thilo Jul 31 '13 at 08:03
1

I agree @Thilo, and I also agree with the first part of what mornaner, but I disagree that the `alert()` will give the *ajax request* time to complete. It will give whatever asynchronous operation might be happening in *randomFunc*... time to complete. :-) – UweB Jul 31 '13 at 08:06
The randomFunctionToReloadThePage is not asynchronous and is not calling any asynchronous functions. Also, DOM elements are fully rendered when calling the insertAfter() function. – Aleksander Panayotov Jul 31 '13 at 08:20
6

+1 because "adding alert makes my code work" almost always means you have an issue with timing of asychronous events. This is the main reason why `alert()` sucks as a debugging tool. Use `console.log()` instead; it doesn't interfere with your processing sequence. – Spudley Jul 31 '13 at 08:58
Well, as I said, the randomFunc... is not asynchronous and does not invoke any asynchronous functions. – Aleksander Panayotov Jul 31 '13 at 10:21

score 3 · Answer 2 · answered Jul 31 '13 at 09:08

This is not an answer but a debugging tip (can't do proper code formatting in a comment).

Add these two calls after the alert():

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

Leave the alert commented out and run it. What does it show in the developer console?

Then for comparison, uncomment the alert, so it runs before those two calls, and run it in Firefox. Now what is in the console?

Aleksander Panayotov · Accepted Answer · 2013-08-05T07:17:42.577

2

Thanks to everyone's answers, and gvee's answer in particular, I managed to get it work. Obviously, there was indeed something asynchronous going on in the randomFunctionToReloadThePage(), and I managed to fix it using the .ajaxStop() method.

Edit: a second bug was found while using ajaxStop(). The solution I found to be working properly is as follows:

1) Add an extra parameter to the randomFunctionToReloadThePage

2) Invoke the function with that extra parameter in the respective page.

edited Aug 05 '13 at 07:17

answered Jul 31 '13 at 13:55

Aleksander Panayotov

145
1
6

2

you should +1 everybody who mentioned that randomFunctionToReloadThePage() is probably asynchronous and you commenting on it saying it was not :) – roel Aug 05 '13 at 09:29

score 1 · Answer 4 · answered Jul 31 '13 at 08:38

try to add: 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.
        }
     });

});

score 0 · Answer 5 · edited Oct 29 '19 at 07:46

0

It happened for me too. We cannot have an alert in our code. Settimeout function solved my problem. Replace the "alert" with "setTimeOut" function and add the rest of the code inside it.

setTimeout(function(){ //your code here }, 300);

edited Oct 29 '19 at 07:46

Salman Zafar

3,844
5
20
43

answered Oct 29 '19 at 07:12

Rahul S Kumar

21
1
4

JavaScript: function not working without alert()

5 Answers5

Linked