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

49
3

Я использую плагин ocupload для jquery, чтобы пользователи моего приложения могли загружать изображение на мой сервер без обновления страницы. Обычно у меня нет никаких проблем с этим, но я пытаюсь инициализировать его в обратном вызове события click, и он просто не работает. Однако, если я попытаюсь инициализировать его после завершения функции обратного вызова 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');
}
});

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

спросил(а) 2011-08-05T02:12:00+04:00 8 лет, 6 месяцев назад
1
Решение
50

Попробуйте поместить код, который не работает в вызове 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",
...
});
}
}
}

ответил(а) 2011-08-05T02:16:00+04:00 8 лет, 6 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема