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

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. — Jordan Reiter
– Jordan Reiter, Commented Aug 8, 2012 at 21:50

Martin · Accepted Answer · 2013-09-16 17:35:21Z

6

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

answered Sep 16, 2013 at 17:35

Martin

711 silver badge3 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jordan Reiter Over a year ago

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

P.J. Hinton Over a year ago

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.

Khalid · Accepted Answer · 2013-02-10 01:23:14Z

3

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>

answered Feb 10, 2013 at 1:23

Khalid

1901 gold badge1 silver badge7 bronze badges

Comments

Van Nostril Boy · Accepted Answer · 2014-09-09 15:12:04Z

0

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

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

answered Sep 9, 2014 at 15:12

Van Nostril Boy

332 silver badges5 bronze badges

Comments

Travis Mathis · Accepted Answer · 2015-02-03 13:53:42Z

0

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;

answered Feb 3, 2015 at 13:53

Travis Mathis

213 bronze badges

1 Comment

Jordan Reiter Over a year ago

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.

Sam Hueppi · Accepted Answer · 2016-07-15 12:57:15Z

-1

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

Use

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

To prevent scrolling to top

answered Jul 15, 2016 at 12:57

Sam Hueppi

497 bronze badges

1 Comment

Jordan Reiter Over a year ago

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

Collectives™ on Stack Overflow

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

5 Answers 5

2 Comments

Comments

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related