Implementing JCrop in ajax upload
<p>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.</p>

<pre><code>$("#image_upload").html("&lt;img src='" + data.path + "' width=\"460\" id=\"cropbox\" alt=\"cropbox\" /&gt;");
</code></pre>

<p>but the image selection doesnt work. why it could be happened ?
this is my code:</p>

<pre><code>&lt;style type="text/css"&gt;
    #preview {
        width: 150px;
        height: 150px;
        overflow: hidden;
    }
&lt;/style&gt;
&lt;script type="text/javascript" src="&lt;?php echo base_url()?&gt;asset/jqupload/js/ajaxfileupload.js"&gt;
&lt;/script&gt;
&lt;script type="text/javascript" src="&lt;?php echo base_url()?&gt;asset/jcrop/jquery.Jcrop.pack.js"&gt;
&lt;/script&gt;
&lt;link rel="stylesheet" href="&lt;?php echo base_url()?&gt;asset/jcrop/jquery.Jcrop.css" type="text/css" /&gt;
&lt;script type="text/javascript"&gt;
    function ajaxFileUpload(){
        $("#loading").ajaxStart(function(){

            $(this).show();
        }).ajaxComplete(function(){
            $(this).hide();
        });

        $.ajaxFileUpload({
            url: '&lt;?php echo site_url()?&gt;/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("&lt;img src='" + data.path + "' width=\"460\" id=\"cropbox\" alt=\"cropbox\" /&gt;");
                        $("#image_upload").fadeIn("slow");
                        $("#orig_h").val(data.width);
                        $("#orig_w").val(data.height);
                        //alert("&lt;a href='" + data.path + "' /&gt;");
                    }
                }
            },
            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'
            });
        }
    });
&lt;/script&gt;




&lt;!-- begin main content --&gt;
&lt;div id="templatemo_content_area"&gt;
    &lt;h1 class="content_title"&gt;Label Info&lt;hr/&gt;&lt;/h1&gt;
    &lt;div id="templatemo_bi_full"&gt;
        &lt;h2&gt;Label Setting&lt;/h2&gt;
        &lt;div id="container"&gt;
        &lt;/div&gt;
        &lt;!--container--&gt;
        &lt;br/&gt;
        &lt;h2&gt;Avatar&lt;/h2&gt;
        &lt;div class="info"&gt;
        &lt;/div&gt;
        &lt;div id="avatar_container"&gt;
            &lt;form name="form" action="" method="POST" enctype="multipart/form-data"&gt;
                &lt;ul&gt;
                    &lt;li class="leftHalf    "&gt;
                        &lt;label class="desc" for="lbl_type"&gt;
                            Change Your Avatar
                        &lt;/label&gt;
                        &lt;div&gt;
                            &lt;div id="avatar"&gt;
                                &lt;img src="&lt;?php echo $avatar?&gt;" width="130" height="130" /&gt;
                            &lt;/div&gt;
                            &lt;div id="avatar_upload"&gt;
                                &lt;input id="fileToUpload" name="fileToUpload" class="field field" value="" size="30" tabindex="5" type="file" /&gt;&lt;input id="buttonUpload" name="buttonUpload" class="btTxt submit" type="submit" value="Upload" onclick="return ajaxFileUpload();"/&gt;&lt;img id="loading" src="&lt;?php echo base_url()?&gt;asset/jqupload/images/loading.gif" style="display:none;"&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/li&gt;
                &lt;/ul&gt;
                &lt;ul id="crop_container"&gt;
                    &lt;li class="leftHalf    "&gt;
                        &lt;label class="desc" for="lbl_name"&gt;
                            Avatar for crop
                        &lt;/label&gt;
                        &lt;div id="image_upload"&gt;
                            &lt;img src="&lt;?php echo $avatar?&gt;" width="450" height="130" id="cropbox" name="cropbox" /&gt;
                        &lt;/div&gt;
                    &lt;/li&gt;
                    &lt;li class="rightHalf     "&gt;
                        &lt;label class="desc" for="lbl_type"&gt;
                            Crop Display
                        &lt;/label&gt;
                        &lt;div id="preview"&gt;
                            &lt;img src="&lt;?php echo base_url() . 'files/' ?&gt;" alt="thumb" /&gt;
                        &lt;/div&gt;
                    &lt;/li&gt;
                    &lt;div class="info"&gt;
                    &lt;/div&gt;
                    &lt;li class="buttons "&gt;
                        &lt;input name="saveForm" class="btTxt submit" type="submit" value="Crop and Save" /&gt;
                    &lt;/li&gt;
                &lt;/ul&gt;
    &lt;input type="text" id="x" name="x" /&gt;
    &lt;input type="text" id="y" name="y" /&gt;
    &lt;input type="text" id="w" name="w" /&gt;
    &lt;input type="text" id="h" name="h" /&gt;
    &lt;input type="text" id="oring_w" name="oring_w" /&gt;
    &lt;input type="text" id="oring_h" name="oring_h" /&gt;
            &lt;/form&gt;
        &lt;/div&gt;
        &lt;div class="cleaner"&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="cleaner"&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;!-- end main content --&gt;
</code></pre>

<p>Help me please ....</p>
