2

I'm creating a jQuery dialog that can be opened and closed from many different buttons, everything is working fine, except when I close the dialog, the browser scrolls to the top. I've tried many of the suggestions online, but none seem to keep the functionality working while preventing the scroll.

I'm creating the dialog like so:

function create_hint_widget(hint_text) {
  if ($("#hint_dialog").hasClass("ui-dialog-content")) 
  {
    $("#hint_dialog").dialog("open");
    $("#hint_dialog").html(hint_text);
  }
  else
  {
    return $("<div id='hint_dialog' title='Help'>" + hint_text + "</div>")
      .dialog({
        resizable: true,
        height: 200,
        width: 300,
        modal: false,
        position: ['right', 180],
        close: function(ev, ui)
        {
          $("#hint_dialog").dialog("close");
        },
      });
  }
}

This is the Rails code to create the link calling the dialog:

 <%= link_to image_tag("hint_link.jpeg", :size=>"13x13"),
 'javascript:;', :onclick => 'create_hint_widget("Enter a name for your template. Each template must have a unique name.");
 return false;' %>

I'm using the open/close for the dialog because I want it to retain its position. event.stopPropagation(); doesn't stop the scroll and event.preventDefault(); breaks the open/close functionality. Probably most important, when I remove my close: function, it no longer scrolls on close, but some of the open/close functionality stops performing.

Uyghur Lives Matter
  • 18,820
  • 42
  • 108
  • 144
user3027875
  • 101
  • 8

2 Answers2

2

Check whether you have focus on any other element than the body (e.g. an input field or button etc.) before opening the dialog. If yes, then try to get the focus back from any element before showing the dialog, something like this:

if (document.activeElement) {
    document.activeElement.blur();
}

As I presume, it jumps back to the focused item after closing.

Or, get the page scroll values before opening the dialog, just like this: JavaScript get window X/Y position for scroll and then catch the close event, and set back the scroll to the previously saved values after hiding the dialog.

Gergő Gyula
  • 31
  • 6
  • 1
    This solution worked for me running jQuery 3.4.1 and jQuery UI 1.12.1. My view had a scrollable div which was scrolling to the left after closing an open jQuery dialog. Losing the focus on the active element before opening the dialog did the trick. Thanks! – gburgalum01 Jul 18 '22 at 20:10
0

So the problem lies within 

$("#hint_dialog").dialog("close");

I kept playing and eventually tried 

$("#hint_dialog").hide();

And it no longer scrolls to the top.

user3027875
  • 101
  • 8