Unable to apply JqueryUI Resizable AspectRatio after initialization?

Question

I was trying to turn the aspect ratios on/off dynamically in JQueryUI resizable, however even after setting the option to false, it keeps maintaining the aspect ratio. Below is the code I am currently working with:

$('#aspect_check').click( function() {
    var ischecked = $('#aspect_check').prop('checked');
    if (ischecked) {
    $( "#resizable" ).resizable( "option", "aspectRatio", .75);
    } else {
        $( "#resizable" ).resizable( "option", "aspectRatio", false );
    }
});

I found a bug report from 3 years ago, which looks like it still hasn't been fixed despite marking it critical. http://bugs.jqueryui.com/ticket/4186

The workarounds don't work with the latest versions. Any ideas?

Edit: After going through a lot of bug reports, here is a work around:

$(function() {
$.extend($.ui.resizable.prototype, (function (orig) {
    return {
        _mouseStart: function (event) {
            this._aspectRatio = !!(this.options.aspectRatio);
            return(orig.call(this, event));
        }
    };
})($.ui.resizable.prototype["_mouseStart"]));
});

Paste it in your javascript script section. Hope it helps someone with similar problem!

Answer 1

This worked for me with no patching

$('#resizable')
  .resizable('option', 'aspectRatio', false)
  .data('uiResizable')._aspectRatio = false;

This part .data('uiResizable')._aspectRatio = false; comes to the rescue

Answer 2

I don't know if it will work or what will happen. But you can try something like this.

$(function(){
    var settings = {
        aspectRatio : .75  
    };
    $("#tadaa").resizable(settings);

    $("input").change(function(){
        if($(this).is(":checked"))
        {

            $("#tadaa").resizable( "destroy" );
            $("#tadaa").resizable();
        }
        else  
        {
            $("#tadaa").resizable( "destroy" );
            $("#tadaa").resizable(settings);
        }   
    });
});

Live demo, currently only the bottom draggable element is styled to use, horizontal div is not styled.

http://jsfiddle.net/t6xFN/1/

Answer 3

I realize that this is an old post but in case anyone still needs an answer you can do it like this:

$('#aspect_check').click( function() {
    var ischecked = $('#aspect_check').prop('checked');
    if (ischecked) {
        $( "#resizable" ).resizable({aspectRatio : .75});
    } else {
        $( "#resizable" ).resizable();
    }
});

Answer 4

Another solution is to save resizable options in a variable and destroy and reinitialize the widget with the updated options:

var options = $("#resizable").resizable("options");
if (ischecked) {
    options.aspectRatio = .75;
} else {
    options.aspectRatio = false;
}
$("#resizable").resizable("destroy");
$("#resizable").resizable(options);