preview disappeared when try to get box and preview panel updated after image update

[h-sobhy]

I have an asp.net page that uses jQuery jCrop and a modal to upload and crop images. the J crop box and preview options including some extra options are working fine as appear in this example show page and code. http://fiddle.jshell.net/4hvE4/show/ http://jsfiddle.net/4hvE4/

User should open the modal to upload an image from iFrame which passes the image data to parent and this working fine too as I guess (I've added a function similar to the one sent from the ASP.NET iFrame). Full code provided in my working example.

My problem started when I try to update the jCrop box and preview and re-attach the api .. only box updated with new image path only without dimensions / aspect ratio and the preview disappeared.

I have tried many of answers including those on this question so I back to call this function that way:

    var _target;
    var ratio;
    var selection;
    // Create variables (in this scope) to hold the API and image size
    var w, h, x, y, x1, y1;
    var jcrop_api;
    $(function () {
        var win = $(window);
        win.bind('load', function () {
            w = _target.width();
            h = _target.height();
            x = Math.round(w / 2 - w / 2);
            y = Math.round(h / 2 - h / 2);
            x1 = x + w;
            y1 = y + h;
            $('#X').val(Math.round(x));
            $('#Y').val(Math.round(y));
            $('#W').val(Math.round(w));
            $('#H').val(Math.round(h));
        }).trigger('resize');
    });

    function sizeJcrop() { }
    function initJcrop() {
        _target = $("#imgTarget");
        var boundx,
             boundy,
             // Grab some information about the preview pane
             $preview = $('#preview-pane'),
             $pcnt = $('#preview-pane .preview-container'),
             $pimg = $('#preview-pane .preview-container img'),
             xsize = $pcnt.width(),
             ysize = $pcnt.height(),
             w = _target.width(),
             h = _target.height(),
             x = w / 2 - w / 2,
             y = h / 2 - h / 2,
             x1 = x + w,
             y1 = y + h;
        _target.Jcrop({
            setSelect: [x, y, x1, y1],
            aspectRatio: ratio,
            onChange: updatePreview,
            onSelect: updateCoords,
            onRelease: clearCoords,
            boxWidth: 450,
            boxHeight: 300
        }, 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;
            // Move the preview into the jcrop container for css positioning
            $preview.appendTo(jcrop_api.ui.holder);
        });
        $('#coords').on('change', 'input', function (e) {
            var x1 = $('#X').val(),
                y1 = $('#Y').val();
            jcrop_api.setSelect([x, y]);
            jcrop_api.animateTo([x, y, x1, y1]);
        });
        $("#ratio").change(function () {
            var val = $(this).val();
            if (val == "1") {
                jcrop_api.setOptions({
                    aspectRatio: false
                });
            }
            else {
                var ratio = 4 / 3;
                var selection = '[0,0,4,3]';
                var text = $(this).find(':selected').text();
                ratio = text;
                var arr = val.split(",");
                var ww = parseInt(arr[0]);
                var hh = parseInt(arr[1]);
                ratio = ww / hh;
                x = parseInt(w / 2 - ww / 2);
                y = parseInt(h / 2 - hh / 2);
                x1 = parseInt(x + ww);
                y1 = y + hh;
                selection = Array("[x,y," + $(this).val() + "]");
                jcrop_api.setOptions({
                    aspectRatio: ratio
                }, {
                    setSelect: [x, y, x1, y1]
                });
                jcrop_api.animateTo([x, y, x1, y1]);
            }
        }).trigger('change');

        function updatePreview(c) {
            if (Math.round(c.w) > 0) {
                var rx = xsize / c.w;
                var ry = ysize / c.h;
                $pimg.css({
                    width: Math.round(rx * boundx) + 'px',
                    height: Math.round(ry * boundy) + 'px',
                    marginLeft: '-' + Math.round(rx * c.x) + 'px',
                    marginTop: '-' + Math.round(ry * c.y) + 'px'
                });
            }
        };

        function updateCoords(c) {
            $('#X').val(Math.round(c.x));
            $('#Y').val(Math.round(c.y));
            $('#W').val(Math.round(c.w));
            $('#H').val(Math.round(c.h));
        };

        function clearCoords() {
            $('#coords input').val('');
        };
    }
    jQuery(function ($) {
        initJcrop();
    });

    $('#myModal').on('show.bs.modal', function () {
        var _modal = $(this);
        var _body = $(this).find('.modal-body');
        $(this).find('.modal-dialog').css({
            width: '500px', 
            'height': '300px',
            'padding': '0'
        });
        $(this).find('.modal-content').css({
            height: '100%',
            'border-radius': '0',
            'padding': '0'
        });
        $(this).find('.modal-body').css({
            width: 'auto',
            height: '300px',
            'padding': '0'
        });
        $('a.external').on('click', function (e) {
            _body.innerHtml('<iframe width="600px" height="300px" frameborder="0" scrolling="yes" allowtransparency="true" src="imgLibrary.aspx"></iframe>');
        });
    });

    function GetUploadedData(src) {
        _target.attr("src", src);
        jcrop_api.destroy();
        $('#imgTarget').attr('src', src);
        $('#cropedImage').attr('src', src);
        $('#txtImage').val(src);

        initJcrop();
    }

    //A function from popup modal
    $(document).ready(function () {
        $('#testInsert').on('click', function () {
            UploadFinished('http://3.bp.blogspot.com/-hc8Z-uJz9_o/T_pQ6nMcXYI/AAAAAAAAFrY/kaGdw2xJgDM/s1600/Best+Car+Deals+Mini.jpg');
        });
    });
    function UploadFinished(src) {
        // window.parent
        GetUploadedData(src);
        $("#myModal").modal('hide');
    }

[mpemberton5]

Bump, same problem. It's related to $preview.appendTo(jcrop_api.ui.holder);

Trying to find out how to "reset" that or update it.

[mpemberton5]

I did note that if you commented this line out that it will work right. However, you might have to code the CSS yourself to make your preview pane look nice.