2015-05-17 2 views
0

Я использую Dropzone для обработки изображений на стороне клиента. Ниже приведен очень простой пример: http://www.dressorganic.co.uk/dropzone-test/noajax.htmНе удается подключить Dropzone к AJAX, загруженному DIV

Как вы можете видеть при просмотре источника, я использую JQuery для присоединения Dropzone к идентификатору upload1 div.

Однако в следующем примере я загружаю upload1 DIV с помощью AJAX: http://www.dressorganic.co.uk/dropzone-test/withajax.htm

К сожалению, я не могу получить Dropzone прикрепить к DIV. Я знаю, что я могу вставить JQuery в singleproductupload.asp, который содержит загружаемый HTML-код. Но я предпочел бы иметь JQuery на родительской странице.

Вот основной HTML страницы:

<!DOCTYPE html> 
<head> 
<meta charset="utf-8"> 
<title>Dropzone with AJAX</title> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script src="/dropzone-test/dropzone/4.0.1/dist/min/dropzone.min.js"></script> 
<link rel="stylesheet" href="/dropzone-test/dropzone/4.0.1/dist/min/dropzone.min.css"> 

<script type="text/javascript"> 
//<![CDATA[ 
$(function() { 

$("#upload1").dropzone({url: "/dropzone-test/handleupload.asp"}); 

$.ajax({ 
    type: 'POST', 
    url: "/dropzone-test/singleproductload.asp", 
    data: { ID: '1' }, 
    success: function(result) { 
    $("#singleproductload").append(result); 

    }, 
    error: function(XMLHttpRequest, textStatus, errorThrown) { 
    alert(textStatus + ": " + errorThrown); 
    }, 

    async:true 
});  


}); // JQuery 
//]]> 
</script> 

</head> 

<body> 

    <div id="singleproductload"> 

    </div> 

</body> 
</html> 

Вот страница HTML загружается в AJAX:

<div id="upload1" class="dropzone"> 

    <p>File uploader</p> 

</div> 
+1

добавить источники для скрипки пожалуйста – 3y3skill3r

+0

Я добавил исходный код к основному вопросу. К сожалению, я не мог заставить это работать над JS Fiddle. –

ответ

1

Я теперь исправлена ​​проблема здесь: http://www.dressorganic.co.uk/dropzone-test/withajax-solution.htm

я имел изменить код AJAX, чтобы объявить Dropzone на обратном вызове успеха:

$.ajax({ 
    type: 'POST', 
    url: "/dropzone-test/singleproductload.asp", 
    data: { ID: '1' }, 
    success: function(result) { 
    $("#singleproductload").append(result); 
    $("#upload1").dropzone({url: "/dropzone-test/handleupload.asp"}); 
    }, 
    error: function(XMLHttpRequest, textStatus, errorThrown) { 
    alert(textStatus + ": " + errorThrown); 
    }, 

    async:true 
}); 
Смежные вопросы