Question

I’m using the ocupload plugin for jQuery to allow users of my app to upload an image to my server without a page refresh. Normally I don’t have any difficulties with it but I’m attempting to initialize it within a click event callback, and it’s simply not working. However if I try to initialize it after the click-event callback function completes by manually entering the initialization code into my js console it DOES work. Anyone know what I’m missing here?

    //Open dialog view for profile picture manipulation
jQuery('#admin_profile_picture_img').bind('click', function(){

    jQuery('#admin_profile_picture_img_dialog').dialog('open');

    //initialize one-click upload for profile picture
    window.myUpload = jQuery('#upload_new').upload({
        name: 'file',
        action: '',
        enctype: 'multipart/form-data',
        params: {},
        autoSubmit: true,
        onSubmit: function(){
            console.log('onSubmit()');
        },
        onComplete: function(){
            console.log('onComplete()');
        },
        onSelect: function(){
            console.log('onSelect()');
        }
    });

    console.log(window.myUpload);

});

Edit:

This is the HTML that goes with this question:

<div style="display:none" id="admin_profile_picture_img_dialog">
<img id="preview_profile_pic" src="http://vibecompass.s3.amazonaws.com/vc-images/profile-pics/c3d9262de038c507a9d86fae67145829.png" alt="profile picture" />
<a id="upload_new" href="#" style="background:#39f; font-size: 24px; color: white;">Click here to upload a photo</a>

Edit 2:

I have the same issue if I move the code into the ‘open’ event callback of the dialog.

    //initialize dialog for profile picture selection/crop
jQuery('#admin_profile_picture_img_dialog').dialog({
    draggable: false,
    height: 500,
    width: 500,
    modal: true,
    resizable: false,
    autoOpen: false,
    title: 'modify profile picture',
    open: function(event, ui){
        setTimeout(function() {
            //initialize one-click upload for profile picture
            window.myUpload = jQuery('#upload_new').upload({
                name: 'file',
                action: '',
                enctype: 'multipart/form-data',
                params: {},
                autoSubmit: true,
                onSubmit: function(){
                    console.log('onSubmit()');
                },
                onComplete: function(){
                    console.log('onComplete()');
                },
                onSelect: function(){
                    console.log('onSelect()');
                }
            });
        }, 500);
        console.log('should open');
    }
});

However once again, if I attempt to initiate it from my command line, it works as expected.

Answer 1

Try putting the code that’s not working in a setTimeout call with a 1ms delay. Ie,

//Open dialog view for profile picture manipulation
jQuery('#admin_profile_picture_img').bind('click', function(){

    jQuery('#admin_profile_picture_img_dialog').dialog('open');

    setTimeout(function() {
        //initialize one-click upload for profile picture
        window.myUpload = jQuery('#upload_new').upload({
            name: 'file',
            action: '',
            enctype: 'multipart/form-data',
            params: {},
            autoSubmit: true,
            onSubmit: function(){
                console.log('onSubmit()');
            },
            onComplete: function(){
                console.log('onComplete()');
            },
            onSelect: function(){
                console.log('onSelect()');
            }
        });
    }, 1);
    console.log(window.myUpload);
});

Edit: My hunch is that $("#upload_new") doesn’t yet exist at this point in the code. Is it created in the dialog’s open event handler? I’d try initializing the upload control in the dialog’s open event handler. Or, you could try the following method, which is a bit extreme, but should work:

//Open dialog view for profile picture manipulation
jQuery('#admin_profile_picture_img').bind('click', function(){

    jQuery('#admin_profile_picture_img_dialog').dialog('open');

    initializeUpload();

    function initializeUpload() {
        var $uploadNew = jQuery("#upload_new");
        if ($uploadNew.length == 0) {
            setTimeout(initializeUpload, 200);
        }
        else {
            window.myUpload = $uploadNew.upload({
                name: "file",
                ...
            });
        }
    }
}