Load another page within a JQuery UI modal (from within the JQuery UI modal...)

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...

William Niu · Accepted Answer · 2011-08-10 12:57:58Z

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.

edited Aug 10, 2011 at 12:57

answered Aug 9, 2011 at 2:01

William Niu

15.9k8 gold badges58 silver badges93 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

dooburt Over a year ago

Hi William, thanks for the answer. Unfortunately, it isn't that simple. The dialog is initialised from a 'parent' page and calls the 'component' page which contains the uploader code. If I reference the 'parent' page objects (such as dialog), it can't find it - because the dialog can't seem to see itself. Placing the uploader.bind functions within the parent is also not an option because I wish to keep it as an upload widget type thing without dependencies on the parent page.

William Niu Over a year ago

I'm not sure I got you. I assume by "parent page", you meant the actual HTML DOM, and by "component page" you meant the uploader dialog. And you want some way to link the uploader dialog back to the "parent page". Is it right?

dooburt Over a year ago

Yep, that's correct. The dialog can't 'see itself', so I can't go window.parent.$('#dialog') for instance. $(this) doesn't seem to work either...

dooburt Over a year ago

Thanks for the answer William ;) It was the call() functionality that I was missing. With thye context being passed in, I can control the dialog from within the dialog... :) +1

Collectives™ on Stack Overflow

Load another page within a JQuery UI modal (from within the JQuery UI modal...)

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related