cropperjs works but shows duplicated images

Question

I am using cropperjs to crop an image. My cropping function goes like this:

function GestionCropEventPhoto(CtrlID) {
$('#' + CtrlID + '_event_img').cropper({
    aspectRatio: 1,
    autoCropArea: 1,
    crop: function (e) {
        var json = [
            '{"x":' + e.x,
            '"y":' + e.y,
            '"height":' + e.height,
            '"width":' + e.width,
            '"rotate":' + e.rotate + '}'
        ].join();
    }
});

var Values = {}
Values["eventid"] = $('#' + CtrlID + '_PEventID_HF').val();
$('#' + CtrlID + '_fileupload', this.el).fileupload({
    url: gestionPath + "/App_Dynamic/WS_Gestion.asmx/UploadedEventPhoto",
    autoUpload: true,
    type: 'POST',
    dataType: 'json',
    submit: function (e, data) {
        data.formData = Values;
    },
    start: function (e) {
        $('#' + CtrlID + '_fileupload_P').css('width', '0%');
    },
    progressall: function (e, data) {
        var progress = parseInt(data.loaded / data.total * 100, 10);
        $('#' + CtrlID + '_fileupload_P').css('width', progress + '%');
    },
    done: function (e, data) {
        if (data.jqXHR.responseText || data.result) {
            var JSONjQueryObject = (data.jqXHR.responseText) ? jQuery.parseJSON(data.jqXHR.responseText) : data.result;
            if (JSONjQueryObject.Value._IsError) {
                ShowErrorMessage('DONE:' + JSONjQueryObject.Value._errorMSG);
            } else {
                $('#' + CtrlID + '_event_img').cropper.('replace', JSONjQueryObject.Value._name)
            }
        }
    },
    fail: function (e, data) {
        ShowErrorMessage('Error: ' + data.jqXHR.responseText);
    }
});

Now, I believe the last 'else' in the 'done' section where i'm using cropper('replace', ...) is what creates the issue. Can you guys help me ?

Answer 1

I found the solution!

cropper.js wasn't included as a stylesheet in my Site.Master.