$(document).ready() doesn't seem to work properly with user control

Question

I have made a user control, and placed some code in the $(document).ready() method, but when I place breakpoints, by the boxWidth value, and step through, I can visibly see that the html has not yet loaded, and that is why I am getting undefined values. I need the html to load first, so that I can get the width and height of an img element to calculate aspect rations etc.

A screen shot is given below:

enter image description here

Next time please post the code itself as well. – Esailija Jul 04 '12 at 10:33 — Esailija, Jul 04 '12 at 10:33

Esailija · Answer 1 · 2012-07-04T10:50:36.633

5

You simply haven't declared those variables anywhere. Try this:

var elem = $("#Body_Body_ucImageUploadAndCrop_CropImage"),
    boxWidth = elem.width(),
    boxHeight = elem.height();

elem.Jcrop({
    onSelect: storeCoords,
    boxWidth: boxWidth,
    boxHeight: boxHeight,
    aspectRatio: boxWidth / boxHeight
});

Now that your code runs error free, you might wanna access the image only after it's loaded:

$(window).on( "load", function() {
    //Code to run after window has loaded
});

Should do it.

edited Jul 04 '12 at 10:50

answered Jul 04 '12 at 10:32

Esailija

138,174
23
272
326

Thats what the error in the screenshot tells atleast, nicely spotted :) – thmsn Jul 04 '12 at 10:36
@thmsn tbh if the image is not cached he is gonna get `0` for the dimensions – Esailija Jul 04 '12 at 10:38
I am still getting a 0 for the dimensions? – Lee Jul 04 '12 at 10:46
1

@lee no `0/0` gives `NaN`. The `ReferenceError` is because you referenced non-existent variables. – Esailija Jul 04 '12 at 10:49

score -1 · Answer 2 · answered Jul 04 '12 at 10:33

-1

You shall be looking for resources loaded event

$.load("image_id", function(){ ... });

answered Jul 04 '12 at 10:33

Samba

607
4
19

$(document).ready() doesn't seem to work properly with user control

2 Answers2