Question

I have a JQuery UI modal:

$('#avatar-manager').click(function () {
                $('#dialog').dialog('open');
                return false;
            });

            $('#dialog').dialog({
                autoOpen: false,
                resizeable: false,
                modal: true,
                position: 'center',
                width: 600,
                open: function () {
                    $(this).load('/a/path/to/my/page.aspx');
                }
            });

And it works wonderfully. page.aspx (example name) contains my upload functionality for images. What I’d like to do is on completion of the upload, to redirect the user to another modal:

uploader.bind('FileUploaded', function (up, file, obj) {
            alert("I've done uploading stuff...");
            //redirect to another modal here...
        });

I know I can’t use windows.location and the like, because that will change the main parent window, so I’m not sure how – or even if I can – do this…

Answer 1

Have you tried simply close the current dialog and open another one?

    $('#dialog2').dialog({
        autoOpen: false;
        modal: true
    });

    uploader.bind('FileUploaded', function (up, file, obj) {
        $('#dialog').dialog('close');
        $('#dialog2').html('Upload finished').dialog('open');
    });

Edit:

You can refer to the dialog several ways depending on how you want to do it. If you want absolute reference, just use $('#dialog'); if you want a relative reference, you could make use of $.proxy(), apply() or call() to pass in the dialog as the substituting context, so you can use $(this) to refer to the dialog.