IE problems with JCrop

Question

I am using jcrop with my aspx page:

<script type="text/javascript" src="../../Scripts/js/jquery.Jcrop.min.js"></script>
<link rel="Stylesheet" href="../../Scripts/css/jquery.Jcrop.min.css" />

Here is my JCrop declaration:

 <script type="text/javascript">
    $(document).ready(function () {
        $('#' + options.ImageID).Jcrop({
            onChange: function (coords) {
                $('#' + options.HiddenID).val(coords.x + ',' + coords.y + ',' + coords.w + ',' + coords.h);
            },
            aspectRatio: 1
        });
    });
</script>

Here is my .NET image:

<asp:Image runat="server" ID="PhotoPreviewImage" />

The options variable is an object created in the code behind to pass the ClientID of PhotoPreviewImage to the JS.

This works great in Chrome, it doesn't work in IE9 (I don't even get the crosshairs).

I am using jquery.Jcrop.min.js v0.9.10 (build:20120429) and jQuery v1.7.1 jquery.com

How can I make this work in IE?

Answer 1

I had some issues with JCrop in IE in the past. I solved it by adding the "onSelect" and "onRelease" events to the options object. I don't know if this will help you in your situation but its worth a shot. My code looked like this:

.Net

<asp:Image ID="cropbox" runat="server" ImageUrl="Assets/images/blank.gif" />

Javascript:

<script>
$(document).ready(function () {
    var api = $.Jcrop('#cropbox', {
        aspectRatio: 1,
        onSelect: update,
        onChange: update,
        onRelease: update
    });
});

function update(c) {
    //Store coords here
}
</script>