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.