Question

I have a modalpopupextender control that is used to upload and crop an image before saving it to the file system.

MPE shows a file upload control first, when the user uploads a file, it shows the cropping section beneath it with the uploaded image. It works the first time, it shows the image and using Jcrop javascript/jquery file, I can crop the frame and save the cropped image.

The code that initializes Jcrop is below in the jQuery(window).load function.

  $.Jcrop(image).setOptions({
        onChange: update,
        onSelect: update,
        aspectRatio: myRatio,
        bgColor: 'white',
        bgOpacity: 0.5
    });

But the problem happens when the user tries to upload another file again without closing the popup. It does not run the update method for jcrop which I believe only runs on the first time the popup is loaded. I need to attach something like a live event handler to it but i’m unable to do so. I tried attaching a bind event as below but it does not work.

$.Jcrop(image).bind('setOptions', { onChange: update,
        onSelect: update,
        aspectRatio: forcedRatio,
        bgColor: 'black',
        bgOpacity: 0.6
    }, function () {
        alert('test');
    });

Has anyone used JCrop in a similar fashion before or any ideas on how to handle this?

Answer 1

For future visitors, I was able to make it work by having the setOptions event inside the window.focus instead of window.load.

jQuery(window).focus(function () {
    $.Jcrop(image).setOptions({ ..... });
});