Cropped mage not showing after crop in cropper.js

i am trying to crop image but when i selected cropping area and the submit cropped image. it not showed cropped image. itshow previous original image. i dont know why this problem occure. in cropper.js

code//

view image as dynamically

$.ajax({
            url: baseUrl +'/print-uploads',
            method: 'POST',
            data: data,
            processData: false,
            contentType: false,
            success: function(pic) {
                var imgele = '<img src='+pic.imgURL+' width="'+pic.imgWidth+'" height="'+pic.imgHeight+'" class="resident_image_preview">';
                var button = '<button class="ro_90"  data-option="-90" title="rotate90"></button>'
                var crossBtn = '<div class="glyphicon glyphicon-trash remove-image" title="Remove image"></div>';
                var aspectBtn = '<div class="glyphicon glyphicon-trash remove-image" title="Remove image"></div>';
                var wrapperDiv = $('<div class="image_wrapper_div">'+crossBtn+aspectBtn+imgele+button+'</div>');
                $("#calendar_main").append(wrapperDiv);
                $(".image_wrapper_div").draggable().rotatable();

                 $('.resident_image_preview').cropper( {autoCrop:false,cropHeight: 200, rotatable :true,
        cropWidth: 200,
        srcNode: '.resident_image_preview',
        x: 50,
        y: 50});

update function//
$(document).on('click', '#calendar_update', function() {
        var id  = $('#calendar_list, .resident_image_preview ').val();
        //before saving remove resize.
         //$('.resident_image_preview').resizable("destroy");
        $('.resident_image_preview').cropper("destroy");
        var calendarhtml = encodeURIComponent($('#calendar_main').html().replace(/\n\s+|\n\t/g, ""));
        // $('.resident_image_preview').resizable();
        $('.resident_image_preview').cropper('getCroppedCanvas');
        //$('.resident_image_preview').cropper();
        $('#calendar-loader').html('<img id="loader" align="center" src=' + baseUrl + '/images/fancybox_loading@2x.gif>');

        if(id){
            $.ajax({
                    url  : baseUrl+'/updatecalendar',
                    data :'payload='+calendarhtml+'&id='+id,
                    type : 'POST',
                    success : function(data){
                    if(data == 1){
                       $('#calendar-loader').html('');
                       alert("Calendar updated successfully");
                    }
                }
            });
        }
    });//update calendar end

i am trying to crop image but when i selected cropping area and the submit cropped image. it not showed cropped image. itshow previous original image.

via Chebli Mohamed