How to use VersatilemageField on a Boostrap Modal ?

[leau2001]

Hi, i try to used Django Versatilimagefield on a Boostrap Modal, but the PPOI doesn't work ...

Here my code

<div class="row">
<!-- Modal add image-->
  <div class="modal fade" id="image_modal" tabindex="-1" role="dialog" aria-labelledby="add_imageLabel" >
       <div class="modal-dialog" role="document">
	    <div class="modal-content">
                  <div class="modal-header">
			<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
			<h4 class="modal-title" id="myModalLabel">Ajouter/Editer une image</h4>
		 </div>
		<div class="modal-body" style="margin:10px;">						
		</div>
		<div class="modal-footer">
			<button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button>
		</div>
	 </div>
      </div>
    </div>
</div>

And Form is injected from javascript function

<script>
$(document).ready(function(){
    $('.openPopup').on('click',function(){
        var dataURL = $(this).attr('data-href');
        $('.modal-body').load(dataURL,function(){
            $('#image_modal').modal({show:true});
			
        });
    }); 
});
</script>

who inject this form code on the Modal body

<form role="form" action="/intranet/laboutique/product/image/editer/{{tab_data.pk_product}}/{{tab_data.pk_image}}/" method="post" enctype="multipart/form-data" name="add_image_form">
	{% csrf_token %}
	<div class="row">
		
		
		<div class="form-group" id="image_form">
			{{tab_data.image_form.media}}
			{{tab_data.image_form}}
			
									
		</div>
		<input id="url_next" name="url_next" type="hidden" value="{{request.path}}">
		<button type="submit" class="btn btn-danger" name="submit_save_image">Sauvegarder</button>				
	</div>
</form>

All works well except the PPOI, i can't move the Point, and Double Click doesn't works as well... I think it's a Dom problem... Thx for help