Script does not work with JQuery 1.9

Question

I am really struggling trying to find out what in this script is not JQuery 1.9.0 compatible. It works fine with 1.7.2.

It's supposed to take a picture the users chooses to upload and show it using HTML5 before actually uploading it.

I hope someone have a sharp eye to spot the error!

// convert bytes into friendly format
function bytesToSize(bytes) {
    var sizes = ['Bytes', 'KB', 'MB'];
    if (bytes == 0) return 'n/a';
    var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
    return (bytes / Math.pow(1024, i)).toFixed(1) + ' ' + sizes[i];
};

// check for selected crop region
function checkForm() {
    if (parseInt($('#w').val())) return true;
    $('.error').html('Please select a crop region and then press Upload').show();
    return false;
};

// update info by cropping (onChange and onSelect events handler)
function updateInfo(e) {
    $('#x1').val(e.x);
    $('#y1').val(e.y);
    $('#x2').val(e.x2);
    $('#y2').val(e.y2);
    $('#w').val(e.w);
    $('#h').val(e.h);
};

// clear info by cropping (onRelease event handler)
function clearInfo() {
    $('.info #w').val('');
    $('.info #h').val('');
};

function fileSelectHandler() {

    // get selected file
    var oFile = $('#image_file')[0].files[0];

    // hide all errors
    $('.error').hide();

    // check for image type (jpg and png are allowed)
    var rFilter = /^(image\/jpeg|image\/png)$/i;
    if (! rFilter.test(oFile.type)) {
        $('.error').html('Please select a valid image file (jpg and png are allowed)').show();
        return;
    }

    // check for file size
    if (oFile.size > 250 * 1024) {
        $('.error').html('You have selected too big file, please select a one smaller image file').show();
        return;
    }

    // preview element
    var oImage = document.getElementById('preview');

    // prepare HTML5 FileReader
    var oReader = new FileReader();
        oReader.onload = function(e) {

        // e.target.result contains the DataURL which we can use as a source of the image
        oImage.src = e.target.result;
        oImage.onload = function () { // onload event handler

            // display step 2
            $('.step2').fadeIn(500);

            // display some basic image info
            var sResultFileSize = bytesToSize(oFile.size);
            $('#filesize').val(sResultFileSize);
            $('#filetype').val(oFile.type);
            $('#filedim').val(oImage.naturalWidth + ' x ' + oImage.naturalHeight);

            // Create variables (in this scope) to hold the Jcrop API and image size
            var jcrop_api, boundx, boundy;

            // destroy Jcrop if it is existed
            if (typeof jcrop_api != 'undefined') 
                jcrop_api.destroy();

            // initialize Jcrop
            $('#preview').Jcrop({
                aspectRatio : 178 / 200, // keep aspect ratio 1:1
                minSize: [178, 200],
                boxWidth: 534,
                boxHeihgt: 600,

                bgFade: true, // use fade effect
                bgOpacity: .3, // fade opacity
                onChange: updateInfo,
                onSelect: updateInfo,
                onRelease: clearInfo
            }, function(){

                // use the Jcrop API to get the real image size
                var bounds = this.getBounds();
                boundx = bounds[0];
                boundy = bounds[1];

                // Store the Jcrop API in the jcrop_api variable
                jcrop_api = this;
            });
        };
    };

    // read selected file as DataURL
    oReader.readAsDataURL(oFile);
}

What "doesn't work" work about it? How are we supposed to know where to look in YOUR code? Explain it, explain the error you're having better, or the point in code it's occuring at. — PenguinCoder, Jan 18 '13 at 14:10
As @DaveHogan said, what does the console say? The very first place you should check is your debugger's output. — Anthony Grist, Jan 18 '13 at 14:10
You're using a library `Jcrop` ... perhaps that's not working properly? — Ja͢ck, Jan 18 '13 at 14:11
[**`console.log()`**](https://developer.mozilla.org/en-US/docs/DOM/console.log) — inhan, Jan 18 '13 at 14:11
The latest version of jQuery is 1.9.0 - is that what you meant instead of 1.9.2? — Rory McCrossan, Jan 18 '13 at 14:13
There is no warnings or anything, it just doesn't show the picture. If I include the 1.7.2 JQuery library instead, it works just fine — Pix, Jan 18 '13 at 14:15
Latest version of jQuery has a lot of things not compatible with previous versions. Try to use jquery.migrate script which should allow you to find and fix places where your script is not compatible with newer jquery. — Viktor S., Jan 18 '13 at 14:15
http://blog.jquery.com/2013/01/15/jquery-1-9-final-jquery-2-0-beta-migrate-final-released/ and link from it to migrate plugin: https://github.com/jquery/jquery-migrate/ — Viktor S., Jan 18 '13 at 14:16

score 4 · Answer 1 · answered Jan 18 '13 at 14:16

jQuery 1.9 has dropped a whole load of old features that had previously been deprecated.

I suggest you read the notes provided by jQuery for upgrading to 1.9 from previous releases. There's quite a lot of stuff that's been removed or changed, so unless you've been keeping right up-to-date with their recommended best practices, you are quite likely to be caught out by something.

Here is the upgrade guide: http://jquery.com/upgrade-guide/1.9/

score 0 · Answer 2 · answered Jan 18 '13 at 14:13

0

Line 4: if (bytes == 0) return 'n/a'; --- Use '===' to compare with '0'.
Line 5: var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024))); --- Missing radix parameter.
Line 11: if (parseInt($('#w').val())) return true; --- Missing radix parameter.
Line 88: bgOpacity: .3, // fade opacity --- A leading decimal point can be confused with a dot: '.3'.

All pointed out here.

answered Jan 18 '13 at 14:13

hjpotter92

78,589
36
144
183

3

These are all just lint warnings and shouldn’t be a compatibility factor. – David Hellsing Jan 18 '13 at 14:14
@David I totally agree with you but because of the [**octal case**](http://stackoverflow.com/questions/850341/how-do-i-work-around-javascripts-parseint-octal-behavior) a radix of 10 is better be supplied there. – inhan Jan 18 '13 at 14:18
3

Why would you even need to `parseInt` the result of `Math.floor`? – Blazemonger Jan 18 '13 at 14:21
1

@Blazemonger - heh. The subtle bugs that would be caused by that are the kind of thing that thedailywtf.com thrives on. :-D – Spudley Jan 18 '13 at 14:33

Script does not work with JQuery 1.9

2 Answers2

Linked