Question

Ok so here is what I want to achieve and the problem I am facing. Steps to follow are:

1. Open a dialog
2. drag it around and/or re-size the dialog
3. Close the dialog
4. Open the dialog again.

The dialog opens from the position where it was last closed from and the size is what it was last re-sized to. I do not want the dialog to behave this way. I want it to be positioned from the center with auto width every time it is opened. I have provided position: ‘center’ and width: ‘auto’ in the init of the dialog but it does not seem to help.

jQuery Version: 1.7.1
jQuery UI Version: 1.8.17
Browser: IE9/IE8

Below is the HTML:

<div class='mydialog'></div>
<a href='#' id='one'>test1</a>

And here is the code for the dialog itself:

$(function(){
   var theDialog = $(".mydialog").dialog({
        autoOpen: false,            
        modal: true,
        width: 'auto',
        position: 'center',            
    });

    $('#one').click(function(){
        theDialog.html('some random text').dialog( "option", "title", "Dynamic Title").dialog('open');
    }); 
});

I tried searching for a solution but I could not find any. I understand this might be counter intuitive, but it is something that is required.

Answer 1

Have you tried using the close event that is listed in the documentation here:

http://jqueryui.com/demos/dialog/

You could do something like:

$( ".mydialog" ).dialog({
   close: function(event, ui) {
       $(this).dialog( "destroy" );

   }
}); 

According to the documentation destroy removes the dialog functionality completely. This will return the element back to its pre-init state.

You may need to initialise the dialog on the click event so that it gets reinitialised each time the link is clicked.

Alternatively, you can just use return false; on the click event to prevent the unwanted behaviour.