upgrade window.open popup to jQuery UI Dialog

Question

I've created a form with a button. If users click the button, browser will generate a popup for user to upload and crop a photo.

onclick="window.open('upload.php');"

if uploaded

window.opener.document.getElementById

the popup will return the cropped pic to the opener window (form)

document.getElementById("errMsg").innerHTML="<input type=\'button\'
onclick=\'window.close();\' value=\'Use this pic\'>";

Finally, the popup will generate a "Use this pic" button.

Now, I want to upgrade this popup to jQuery Dialog to make it polish. How can I do that?

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

Answer 1

Try Using a Modal Form in which you can call the dialog for user to upload & crop the image and on clicking Use this pic on the dialog; return to your page and continue your application.

Better performances, you can use Jquery Modal Form with lighbox for a better UI.

Cheers!!!

Answer 2

What is the problem?

Take upload.php's code (the stuff within the BODY element) and put it inside the caller page, within a DIV.

Then apply a dialog with jQuery on that DIV. Then just activate that dialog when needed.

Now, as for the code itself - I'm sure you need to re-wire a few things but the idea is very simple and I really don't understand why this question has a bounty of +100 reputation, really. Not that I mind having it haha!

Answer 3

I hope I got what exactly you're trying to achieve.

Here is jsfiddle example: http://jsfiddle.net/nNw33/3/

Here is the code:

$(document).ready(function () {
    $('#initUpload').click(function (event) {
        $('#Dialog').dialog();
        setTimeout(function () {
        // upload completes
                $('#errMsg')
                    .html("<input type=\'button\' value=\'Use this pic\'>")
                    .click(function () {
                         $('#Dialog').dialog('close');        
                    });
        }, 1500);
    });
});

HTML:

<input type="button" id="initUpload" value="Upload" />
<div id="Dialog" style="display: none">
    Upload content here
    <div id="errMsg"></div>
</div>