How to prevent jquery.ui.dialog from scrolling window to the top (when called programaticallly)

Question

I have the following code:

    $(".foo-form").submit(function (event) {
        event.stopPropagation();
        event.preventDefault();
        $.ajax({
            url: this.action,
            data: $(this).serializeArray(),
            type: 'POST',
            dataType: 'json',
            success: function (data, msg, resp) {
                var $form = $("#second-form");
                $form.show().dialog({
                    resizable: false,
                    height:400,
                    width: 600,
                    modal: true,
                    title: "Recommendation added",
                    buttons: [
                        {
                            text: "OK",
                            click: doOK
                        },
                        {
                            text: "Cancel",
                            click: doCancel
                        }
                    ]
                });
            }
        })
        return false;
    });

If I am scrolled down on the page and submit the form, when the dialog box is displayed it scrolls the page to the top. Is there any way to override this?

Things that are not the solution

• fixing the positioning for the .ui-dialog class. It's unmodified (using Google's CDN)
• not canceling out events - as you can see, I call stopPropagation, preventDefault, and return false. So it's not that the event is going through (and even if it were, it's not a hash link to the top of the page anyway)

Using jQuery 1.72 and jQuery UI 1.8.21 (latest versions of each).

Answer 1

I had the same issue using jQuery dialog with href tags and I fix it adding "event.preventDefault();" when I invoque the dialog, example:

$(".button").click(function(event){
event.preventDefault();
$("#dialog").dialog();
});