Question

I am using jQuery’s UI Dialog to draw a dialog (my-ui-dialog) to the screen and present the user with some <input>s and other controls. When the user clicks the dialog’s OK button, I want the UI dialog to fire an AJAX/JSON message to my server (via getJSON), allow the server to process that call, and then close the dialog after the response is received from the server. Then the user should be redirected (via window.location) to another web page.

Here’s my code:

$("#my-ui-dialog").dialog({
    modal: true,
    autoOpen: false,
    height: 255,
    width: 300,
    buttons: {
        "OK" : function() {
            var f = $("#fizz").val();

            $.getJSON(
                "/myserver/do-something",
                {
                    fizz: f
                },
                function() {
                    $("#my-ui-dialog").dialog('destroy');
                }
            );

            // When I leave this in the code works great.
            // When I comment the alert out, the getJSON call never
            // hits the server-side.
            alert("Returned from the backend...");

            window.location = "/myserver/some-other-url"
            $(this).dialog("close");
        },
        Cancel : function() {
            $(this).dialog("close");
        }
    }
});

When I leave that alert box in, and wait a few seconds (with the alertbox drawn to screen), the getJSON method seems to have enough time to hit the server and return. But if I comment out the alert the request never even hits my server. I can tell this by adding a log message to the beginning of the handler listening at /myserver/do-something. This is also a Java web app and I don’t see any evidence of Tomcat receiving the request, and I don’t see the HTTP request being generated when using Firebug to debug. All 3 of these indicate that the request is simply not hitting the server at all.

What are my options here? Can I make the jQuery sleep for a few seconds? That feels like an ugly solution; there must be a better way to use the jQuery API… thanks in advance!

Answer 1

Put your dialog close and window.location code in the getJSON callback. That’s why there’s a callback.