Question

I wrote an extedned plugin based on jCrop to crop mulitple images one after another.

I developed and debugged using Chrome and everything worked fine without any JavaScript issues. When i came to test in Explorer it fell over and threw a script error that wrote out

jcrop api is null or not an object

So my javascript is simply…

var jcrop_api; //Global var to be used thorugh out the client

//some code here

//jCrop documention tells us to use this to assign itself to an object.
//I look for both because i use .net masterpages and sometimes not.

$('#SourceImage, #body_SourceImage').Jcrop({},function () { jcrop_api = this; });


//some more code but not far down the line i need to set jCrop options using API

jcrop_api.setOptions({
           boxWidth: bw,
           onSelect: updateCoords,
           minSize: [thisImage.Min.Width, thisImage.Min.Height],
           aspectRatio: thisImage.AspectRatio
       });
 jcrop_api.setImage('../cache/uploads/' + fileName);

That all work in Chrome and i can change images using a global trigger. I have no idea why it does not work in IE?

Answer 1

Indeed jCrop does show in the documentation the exact line that you use. But the IE JavaScript engine is unforgiving.

What you need to do is use this line to assign the api to a var

var jcrop_api;

$(document).ready(function () {

jcrop_api = $.Jcrop($('#SourceImage, #body_SourceImage'), {});

Then do the rest. For some reason this in IE refferes back to the entire DOM instead of the callback function of jCrop and fails to assign, leaving your API variable as nothing.

This change does not affect Chrome, FF or anything else.. and is a bit more clearer any way.