ocupload плагин jQuery не работает при инициализации внутри функции обратного вызова события? - PullRequest
Новая
       9

ocupload плагин jQuery не работает при инициализации внутри функции обратного вызова события?

1 голос
/ 05 августа 2011

Я использую плагин ocupload для jQuery, чтобы позволить пользователям моего приложения загружать изображение на мой сервер без обновления страницы. Обычно у меня нет никаких проблем с этим, но я пытаюсь инициализировать его в обратном вызове события щелчка, и он просто не работает. Однако, если я попытаюсь инициализировать его после завершения функции обратного вызова click-event, вручную введя код инициализации в мою консоль js, он ДЕЙСТВУЕТ. Кто-нибудь знает, что мне здесь не хватает? 

    //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);

});

Редактировать

Это HTML, который идет с этим вопросом: 

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

Редактировать 2 :

У меня та же проблема, если я переместил код в функцию обратного вызова события open. 

    //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');
    }
});

Однако еще раз, если я пытаюсь запустить его из командной строки, он работает как положено.

1 Ответ

1 голос
/ 05 августа 2011

Попробуйте ввести код, который не работает, в вызове setTimeout с задержкой 1 мс.Т.е., 

//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);
});

Редактировать: Я догадываюсь, что $("#upload_new") еще не существует на данный момент в коде.Он создан в обработчике события открытия диалога?Я бы попробовал инициализировать элемент управления загрузкой в ​​обработчике события открытия диалога.Или вы можете попробовать следующий метод, который немного экстремален, но должен работать: 

//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",
                ...
            });
        }
    }
}
...