Javascript functions execute without waiting for functions in the lines above to return?

Question

I've bound a function to a form submit button. I want the function to pop up an iframe dialog box and wait for user interaction, and THEN submit the form (via an ajax post).

But the behavior I'm seeing is that the dialog pops but the function continues executing and does the ajax post, even though the dialog box call hasn't returned yet. I need some way of halting the code execution until that dialog function returns.

I have something like:

submitForm: function () {   

        <call a function that pops up a dialog, doesn't return until user interacts> 

        new Ajax.Updater('dialogContainer', url, {
                ...........
            }
        });      

        return false;
    }

I think this is the expected behavior of Javascript but am not sure how to get around it...

Answer 1

Javascript in the browser will execute sequentially, so obviously your call to launch the iframe dialog box doesn't wait for the user interaction & returns immediately. My guess is that whatever library you're using to popup your dialog box will have some sort of callback function that it will execute based on the user action instead. So you just need to move your new Ajax.Updater(....); code into a callback function.

Answer 2

Based on a basic knowledge that I have of javascript I think that's the normal behavior as long as the dialog box runs independently of your code (the code the called it).

Does your dialog box have any javascript running in it? Because I think, if it has, you can maybe pass a function as a parameter (callback that will execute the code you want) that will be called from the dialog box when it returns.

Answer 3

I would say that you should call the first function also through ajax. and I think you are using prototype.

You have onComplete callback function in Ajax.Request and Ajax.Updater Objects. Then in onComplete function can run the second function.

like

onComplete : function() { new Ajax.Updater('dialogContainer', url, { ........... } }); }

Answer 4

If your target web client is Internet Explorer only, you can use window.showModalDialog. It has the nice property of blocking the javascript thread in the parent window.

showModalDialog has been implemented in Firefox, but I don't know if the function is blocking in Firefox.