I'm using multiple instances of the JQuery-UI dialog along with draggable and resizable.
Whenever I drag or resize one of the dialog boxes, the position and dimensions of the current box are saved to a database and then loaded the next time the page opens.
This is working well.
However, when I close a dialog box and re-open it using a button, jQuery sets the position of the box back to its original location in the center of the screen.
Furthermore, I use a show effect to slide the box off to the left on closing and in from the left on re-opening.
I found two ways to update its position when the slide in animation is done, however, it still slides into the center of the screen, and I have yet to find a way to get it to slide in towards the location it is supposed to have.
Here are the parts of the code that play a part in this:
$('.box').dialog({
closeOnEscape: false,
hide: { effect: "drop", direction: 'left' },
beforeClose: function (evt, ui){
var $this = $(this);
SavePos($this); // saves the dimensions to db
},
dragStop: function()
{
var $this = $(this);
SavePos($this);
},
resizeStop: function()
{
var $this = $(this);
SavePos($this);
},
open: function()
{
var $this = $(this);
$this.dialog('option', { show: { effect: "drop", direction: 'left'} } );
if (init) // meaning only load this code when the page has finished initializing
{
// tried it both ways - set the position before and after the effect - no success
UpdatePos($this.attr('id'));
// I tried this section with promise() and effect / complete - I found no difference
$this.parent().promise().done(function() {
UpdatePos($this.attr('id'));
});
}
}
});
function UpdatePos(key)
{
// boxpos is an object holding the position for each box by the box's id
var $this = $('#' + key);
//console.log('updating pos for box ' + boxid);
if ($this && $this.hasClass('ui-dialog-content'))
{
//console.log($this.dialog('widget').css('left'));
$this.dialog('option', { width: boxpos[key].width, height: boxpos[key].height });
$this.dialog('widget').css({ left: boxpos[key].left + 'px', top: boxpos[key].top + 'px' });
//console.log('finished updating pos');
//console.log($this.dialog('widget').css('left'));
}
}
The button that re-opens the box has this code on it to make that happen:
var $box = $('#boxid');
if ($box)
{
if ($box.dialog('isOpen'))
{
$box.dialog('moveToTop');
}
else
{
$box.dialog("open")
}
}
I don't know what jQuery-UI does to the box as it hides it (other than display:none) or to make it slide in, so maybe there's something I'm missing here that might help...
Basically, I need JQuery to remember the box' position and put the box back into that location when it is re-opened.
It took me days to make it this far, but this is one obstacle I have yet to overcome.
Maybe there's a different way I can re-open the box?
Thanks!
EDIT:
Forgot - this issue ONLY happens when I use my UpdatePos function to set the location of a box (i.e. on page load). When I drag a box with my mouse, close it, and re-open it, everything works. So I'm guessing there's one more storage location for the box' position that I'm missing here...
EDIT2:
After more messing with it, my code for debugging now looks like this:
open: function()
{
var $this = $(this);
console.log('box open');
console.log($this.dialog('widget').position()); // { top=0, left=-78.5}
console.log($this.dialog('widget').css('left'));
$this.dialog('option', { show: { effect: "drop", direction: 'left'} } );
if (init)
{
UpdatePos($this.attr('id'));
$this.parent().promise().done(function() {
console.log($this.dialog('widget').position()); // { top=313, left=641.5}
console.log($this.dialog('widget').css('left'));
UpdatePos($this.attr('id'));
console.log($this.dialog('widget').position()); // { top=121, left=107}
console.log($this.dialog('widget').css('left'));
});
}
The results I'm getting are:
box open
Object { top=0, left=-78.5}
-78.5px
Object { top=313, left=641.5}
641.5px
Object { top=121, left=107}
107px
So looks to me as if the widget is being moved off screen (left=-78.5) and then moved for the animation, and then my code moves it into the location that it should be in (121/107).
The position() results for $box.position() or $box.dialog().position() do not change during this debugging section.
Maybe this will help someone here - I'm still out of ideas here...
... and I just discovered that when I drag the item around myself, then close and re-open it, it is very unpredictable. Sometimes, it will end up in the correct location horizontally, but not vertically. Sometimes, it will end up back in the center of the screen...
