Jquery UI Close Dialog & Open New Dialog

Question

The concept seems simple enough, yet i'm having a lot problems executing it.

I need to close the current dialog and open another. It does close the #imageModal, but does not open the #uploadModal.

Any suggestions?

Edit: Added the #uploadModal

$("#imageModal").dialog({
    autoOpen: false,
    height: 500,
    width: 500,
    modal: true,
    closeOnEscape: true,
    resizable: false,
    buttons: {
        'Upload Image': function() {
            // CLOSE 1 DIALOG AND OPEN ANOTHER
            $(this).dialog('close');
            $('#uploadModal').dialog('open');

        },
        Cancel: function() {
            $(this).dialog('close');
        }
    },
    close: function() {
        $(this).dialog('close');
    }
});


$("#uploadModal").dialog({
    autoOpen: false,
    height: 500,
    width: 500,
    modal: true,
    closeOnEscape: true,
    resizable: false,
    buttons: {
        'Upload Image': function() {


        },
        Cancel: function() {
            $(this).dialog('close');
        }
    },
    close: function() {
        $(this).dialog('close');
    }
});         

Answer 1

$(this).dialog('close');
$('#uploadModal').dialog('open');

This actually works fine for me (jquery 1.7 jquery-ui 1.8). The suggested answer only closes the dialog and doesn't open the new one.

Answer 2

Yeah, this has been up here for a bit. I was searching on how to fix the same issue. I posted up more code then needed so you can see whats going on. I used the name of the current dialog to close and the name of the new one to open. Works...

//============= User Modal ===============================//

$( "#dialog-message" ).dialog({
    autoOpen: false,
    modal: true,
    resizable: false,
    width: 650,
    buttons: {
        Add: function() {
            $('#dialog-message').dialog( "close" );
            $('#dialog-message3').dialog( "open" );
        }
    }
});

$( "#opener" ).click(function() {
    $( "#dialog-message" ).dialog( "open" );
    return false;
}); 

//========== Add User Modal ============================ // 
$( "#dialog-message3" ).dialog({
    autoOpen: false,
    modal: true,
    resizable: false,
    width: 250,
    buttons: {
        Save: function() {
            $( '#dialog-message3' ).dialog( "close" );
        }
    }
});

Answer 3

Hmm, have u change the order of close and open? Let´s say, first open the next dialog, then closes the first one?

1 - This;

// CLOSE 1 DIALOG AND OPEN ANOTHER
   $(this).dialog('close');
   $('#uploadModal').dialog('open');

2 - To:

// CLOSE 1 DIALOG AND OPEN ANOTHER
   $('#uploadModal').dialog('open');
   $(this).dialog('close');

Answer 4

Use the callback function that is executed when the dialog has finished his task.

[...]
'Upload Image': function() {
                // CLOSE 1 DIALOG AND OPEN ANOTHER
                $(this).dialog('close', function() {
                     $('#uploadModal').dialog('open');
                });

}, 
[...]

Answer 5

Try wrapping your "uploadModal" open call in a setTimeout.

'Upload Image': function() { 
    // CLOSE 1 DIALOG AND OPEN ANOTHER 
    $(this).dialog('close'); 
    setTimeout(function () {
        $('#uploadModal').dialog('open');
    }, 100);
}, 

You could also bind to the close event of the dialog via..

$("#uploadImage").bind("dialogClose", function () {
    // code goes here
});

but I think the first will work fine for what you want.