Jquery Dialog Position Problem After Web Form Post Back

In a normal browser window, jquery dialog is positioned in the screen center as default. But when the dialog is opened by code and especially after the web form post back, very likely the dialog will be positioned at the top of your page rather than the viewport, no matter you set maintainScrollPositionOnPostBack=”true” or not.

The version of jquery I am using is 1.3.2 and ui is 1.7.2

It turns out there are a few reasons that are behind this.

1.Setting maintainScrollPositionOnPostBack=”true” does not make your dialog positioned to screen center, as document.ready event handled by jquery happened before the scroll position restore by web form, so what happens here is dialog is first positioned with no scroll, then the screen is restored to the scroll position where it should be, if you are unlucky, your dialog box will be totally out of the viewport.

2.The solution would be to open your dialog after WebForm_SaveScrollPositionSubmit() , as I failed to find any documents about how web form events are arranged, I opt for another way that is to set the position of dialog.

Here is the piece of code I used to try to move my dialog

var pos = new Array();
pos[0] =theForm.elements['__SCROLLPOSITIONX'].value;
pos[1] =theForm.elements['__SCROLLPOSITIONY'].value;

$("#messagedialog2").dialog({
              bgiframe: true,
              modal: true,
              position : pos,  
              autoOpen: false,
              width: 880,
              close: function () {
                  ;
              }
          });

Thanks to web form for the mechanism of maintainScrollPositionOnPostBack, it saves the scroll position before postback to theForm.elements[‘__SCROLLPOSITIONX’].value and
theForm.elements[‘__SCROLLPOSITIONY’].value.

Wow, great, then you know what? It did not work. Was it a bug that jquery dialog position is not working?

While a look at the code of ui.dialog.js(1.7.2) the implementation of _position function, I found the answers of all my questions.

First have a look of this within _position

_position: function(pos) {

 var wnd = $(window), doc = $(document),
 pTop = doc.scrollTop(), pLeft = doc.scrollLeft(),
 minTop = pTop;
....

You can see in normal circumstances, when you click to open a dialog, doc.scrollTop() and doc.scrollLeft() will always remember your current position, the dialog will as expected be in the viewport center, but in my case, the dialog was brought up by code and to further complicate this after a post back, these two functions both return with 0 in this case. So the dialog is opened at the page top rather than screen center.

Another lesson I have learned is when you construct your position object for dialog, the x and y must be int. As you can see its code here

if (pos[0].constructor == Number) {
			pLeft += pos[0];
		}

It is checking its constructor to see if pos has the integer coordinates or positioning text as ‘center’,’top’ or ‘bottom’. If you assigned a [“100”,”100”] to your position, it is not going to be parsed.

So the final code that worked for me is:

    var pos = new Array();
         pos[0] =($(window).width()-880)/2+
                    parseInt(theForm.elements['__SCROLLPOSITIONX'].value);
         pos[1] =100+parseInt(theForm.elements['__SCROLLPOSITIONY'].value);

          $("#messagedialog2").dialog({
              bgiframe: true,
              modal: true,
              position : pos,  
              autoOpen: false,
              width: 880,
              close: function () {
                  ;
              }
          });

Just some extra explanation:

__SCROLLPOSITIONX and __SCROLLPOSITIONY is the top left corner coordinates of your screen, not exactly the center. My dialog width is 880, but I do not know the height of my dialog, and do not mind just to position it 100px down from screen top.

Have fun

Tags:

This entry was posted on Thursday, August 26th, 2010 at 3:58 am and is filed under ASP.NET, Javascript. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

3 Responses to “Jquery Dialog Position Problem After Web Form Post Back”

  1. Hi there may I quote some of the content here in this blog if I provide a link back to your site?

  2. TerryB says:

    I am finding issues with this when the page is really long. Say twice the length of the screen area or more. JQuery doeses not want to position the Dialog correctly. Ummm

Leave a Reply

*