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

Rosabella

you can not just exchange the popup with the dialog. you have to reimplement the popup as an dialog. – Acrophobia

Is the answer from me sufficient?? The bounty is still up?? – Counteroffensive

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

Counteroffensive

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!

Inca

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>

Euroclydon

Answer 4

You should read this cute plugin, which allows you to upload files asynchroniously.

http://malsup.com/jquery/form/#options-object

Add following in body whereever on page it fits:

<button onclick="openPopup()">Show dialog</button>
<div id="modalFormDia"><!-- blank --></div>

Add following to head to load plugin. Nice example usage here

<script src="http://malsup.github.com/jquery.form.js"></script> 

It works with a hidden iframe, submitting the results to your backend without opening any windows.

This way everything can be done in one 'window' or, lets make that the dialog popup youre probably looking for

Grab sample code from a fiddle here. Following code can be put anywhere as well, globally accessible

function onComplete(xhr) {
    // Lets expect that the server sends back
    // the URL pointing to uploaded image, an error if failed
    if (xhr.responseText.match("error")) {

        // failed
        $("#feedback").html("Upload failed: " + xhr.responseText);
    } else {

        // uploaded
        $("#feedback").html('Upload done <button>"LOVING IT, USE THIS"</button>').click(function() {
            // image accepted, close dialog and set the image on main page
            diaDom.dialog('close')
            $('#targetOnPage') // ....
        });
        $('#preview').html('<img src="' + xhr.responseText + '" alt="Image preview loads here"/' + '>');

    }
}

function openPopup() {
    // get the dialog DOM node (if first time, create)
    var diaDom = $('#modalFormDia')
    diaDom.html('<form id="myForm" onsubmit="return false;" action="upload.php" method="post" enctype="multipart/form-data">' + '<input type="file" name="myfile"><br>' + '<input type="submit" value="Upload File to Server">' + '<hr/><div id="preview"></div><div id="feedback"></div>').dialog({
        buttons: {
            "Cancel": function() {
                $(diaDom).dialog('close');
            }
        },
        closeOnEscape: false,
        autoOpen: true,
        modal: true,
        title: 'Image Uploader'

    });
    // setup form with hooks
    $('#myForm').ajaxForm({
        beforeSend: function() {
            $('#feedback').html('Upload starting')
        },
        complete: onComplete
    });
}​

Unknowing