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).

Guideboard

Try getting its scrollTop and setting the page's scrollTop. – Cavetto

You mean something like currentScroll = $(window).scrollTop(); $dialog....{ open: function () { $(window).scrollTop(currentScroll)}} I mean, obviously I can do that. I'd much, much rather just have it not scroll at all, since it's breaking the page. – Guideboard

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();
});

Running

If you read my attached code you'll see I use event.stopPropagation, event.preventDefault and return false. – Guideboard

This approach worked for my situation, where I had a modal dialog being summoned on a page where the vertical height was longer than the browser (Firefox 23) viewport. – Rostock

Answer 2

I had similar issue with using jQuery dialog with href tags. All I had to do to fix it is to remove the href="#" from the a tag and that solved my issue.

Change<a href='#'>SHOW</a> to <a>SHOW</a>

Lightly

Answer 3

try adding a function for close and use preventDefault inside, worked for me

$form.show().dialog({
                close: function (event) { event.preventDefault(); }
                resizable: false,
                etc....
            });

Gifu

Answer 4

the best fix for this i find is to return false; after you open the dialog.

so just move your return false; outside of the dialog function. I know this is an old question, but didn't see this resolution here and it worked for me.

The issue with your stopPropagation, preventDefault(), and return false; is that they're all in the wrong place.

This is how I do it.

   $("<div><p>" + text + "</p></div>").dialog({
        modal: true,
        resizable: false,
        width: width,
        buttons: {
            Ok: function() {
                $(this).dialog("close");
            }
        }
    });
    return false;

Meletius

Either I'm really misunderstanding something, or you're not looking at my code carefully. The stopPropagation and preventDefaults are being called on the form submit event. There is no event in the success function and thus no event to stop. Same with the return false: there is no event on the success function so returning false would have no effect whatsoever. – Guideboard

Answer 5

It scrolls because of the <a href=""></a> tag.

Use

<a class="someClass" href=#!"></a>

To prevent scrolling to top

Choochoo

It's not a link. There is no <a> tag. – Guideboard