Implementing JCrop in ajax upload - php

Question

I'm trying to develop image crop using JQuery.
I use ajax to upload the image. after the image success fully uploaded. I load the uploaded image using jquery to its container.
$("#image_upload").html("<img src='" + data.path + "' width=\"460\" id=\"cropbox\" alt=\"cropbox\" />");
but the image selection doesnt work. why it could be happened ?
this is my code:
<style type="text/css">
#preview {
width: 150px;
height: 150px;
overflow: hidden;
}
</style>
<script type="text/javascript" src="<?php echo base_url()?>asset/jqupload/js/ajaxfileupload.js">
</script>
<script type="text/javascript" src="<?php echo base_url()?>asset/jcrop/jquery.Jcrop.pack.js">
</script>
<link rel="stylesheet" href="<?php echo base_url()?>asset/jcrop/jquery.Jcrop.css" type="text/css" />
<script type="text/javascript">
function ajaxFileUpload(){
$("#loading").ajaxStart(function(){
$(this).show();
}).ajaxComplete(function(){
$(this).hide();
});
$.ajaxFileUpload({
url: '<?php echo site_url()?>/upload/do_upload',
secureuri: false,
fileElementId: 'fileToUpload',
dataType: 'json',
success: function(data, status){
if (typeof(data.error) != 'undefined') {
if (data.error != '') {
$("#image_upload").html(data.error);
$("#image_upload").fadeIn("slow");
}
else {
$("#image_upload").html("<img src='" + data.path + "' width=\"460\" id=\"cropbox\" alt=\"cropbox\" />");
$("#image_upload").fadeIn("slow");
$("#orig_h").val(data.width);
$("#orig_w").val(data.height);
//alert("<a href='" + data.path + "' />");
}
}
},
error: function(data, status, e){
$("#image_upload").html(e);
$("#image_upload").fadeIn("slow");
}
})
return false;
}
$(document).ready(function(){
$(function(){
$('#cropbox').Jcrop({
aspectRatio: 1,
setSelect: [0, 0, $("#oring_w").val(), $("#oring_h").val()],
onSelect: updateCoords,
onChange: updateCoords
});
});
function updateCoords(c){
showPreview(c);
$("#x").val(c.x);
$("#y").val(c.y);
$("#w").val(c.w);
$("#h").val(c.h);
}
function showPreview(coords){
var rx = $("#oring_w").val() / coords.w;
var ry = $("#oring_h").val() / coords.h;
$("#preview img").css({
width: Math.round(rx * $("#oring_w").val()) + 'px',
height: Math.round(ry * $("#oring_h").val()) + 'px',
marginLeft: '-' + Math.round(rx * coords.x) + 'px',
marginTop: '-' + Math.round(ry * coords.y) + 'px'
});
}
});
</script>
<!-- begin main content -->
<div id="templatemo_content_area">
<h1 class="content_title">Label Info<hr/></h1>
<div id="templatemo_bi_full">
<h2>Label Setting</h2>
<div id="container">
</div>
<!--container-->
<br/>
<h2>Avatar</h2>
<div class="info">
</div>
<div id="avatar_container">
<form name="form" action="" method="POST" enctype="multipart/form-data">
<ul>
<li class="leftHalf ">
<label class="desc" for="lbl_type">
Change Your Avatar
</label>
<div>
<div id="avatar">
<img src="<?php echo $avatar?>" width="130" height="130" />
</div>
<div id="avatar_upload">
<input id="fileToUpload" name="fileToUpload" class="field field" value="" size="30" tabindex="5" type="file" /><input id="buttonUpload" name="buttonUpload" class="btTxt submit" type="submit" value="Upload" onclick="return ajaxFileUpload();"/><img id="loading" src="<?php echo base_url()?>asset/jqupload/images/loading.gif" style="display:none;">
</div>
</div>
</li>
</ul>
<ul id="crop_container">
<li class="leftHalf ">
<label class="desc" for="lbl_name">
Avatar for crop
</label>
<div id="image_upload">
<img src="<?php echo $avatar?>" width="450" height="130" id="cropbox" name="cropbox" />
</div>
</li>
<li class="rightHalf ">
<label class="desc" for="lbl_type">
Crop Display
</label>
<div id="preview">
<img src="<?php echo base_url() . 'files/' ?>" alt="thumb" />
</div>
</li>
<div class="info">
</div>
<li class="buttons ">
<input name="saveForm" class="btTxt submit" type="submit" value="Crop and Save" />
</li>
</ul>
<input type="text" id="x" name="x" />
<input type="text" id="y" name="y" />
<input type="text" id="w" name="w" />
<input type="text" id="h" name="h" />
<input type="text" id="oring_w" name="oring_w" />
<input type="text" id="oring_h" name="oring_h" />
</form>
</div>
<div class="cleaner">
</div>
</div>
<div class="cleaner">
</div>
</div>
<!-- end main content -->
Help me please ....

Answer 1

It doesn't work because you get your image via ajax call. When you call the jcrop function on document.ready the image doesn't exist. You need to put the jcrop code in the success function of the ajax call, after you add the image in DOM. Should be something like this (not tested):
$.ajaxFileUpload({
url: '<?php echo site_url()?>/upload/do_upload',
secureuri: false,
fileElementId: 'fileToUpload',
dataType: 'json',
success: function(data, status){
if (typeof(data.error) != 'undefined') {
if (data.error != '') {
$("#image_upload").html(data.error);
$("#image_upload").fadeIn("slow");
}
else {
$("#image_upload").html("<img src='" + data.path + "' width=\"460\" id=\"cropbox\" alt=\"cropbox\" />");//it is important to add the jcrop code after this line
$("#image_upload").fadeIn("slow");
$("#orig_h").val(data.width);
$("#orig_w").val(data.height);
$('#cropbox').Jcrop({
aspectRatio: 1,
setSelect: [0, 0, $("#oring_w").val(), $("#oring_h").val()],
onSelect: updateCoords,
onChange: updateCoords
});
}
}
},
error: function(data, status, e){
$("#image_upload").html(e);
$("#image_upload").fadeIn("slow");
}
})

Answer 2

None of the above worked for me .If you are also facing this issue try this
$('#target').Jcrop({
onChange: updatePreview,
onSelect: updatePreview,
aspectRatio: 1,
},function(){
// Use the API to get the real image size
var bounds = this.getBounds();
boundx = bounds[0];
boundy = bounds[1];
// Store the API in the jcrop_api variable
jcrop_api = this;
jcrop_api.setSelect([ 100,100,200,200 ]);
});

Answer 3

Or you could use .live function of the jQuery to add jCrop to any specified element (image) as soon as those are added to DOM.
Check this: http://api.jquery.com/live/