Implementing JCrop in ajax upload

Question

Hi ...., 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

The code is very long and I just skimmed through it. I found a glitch in one place: you have a function called updateCoords and the function expects one parameter, but you call it twice without any parameters. This might be the cause though I'm not sure. Just wanted to give you a hint.

Answer 2

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 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/