CODEWITHSUNDEEP
javascriptjqueryjquery-ui
artem_golovin
artem_golovin

Reputation: 154

jQueryUI Resizable doesn't respond on option change

I use jQuery UI Resizable module and looks like it doesn't react when I try to pass an option after it was initialised.

So if I initialize element:

$('.blabla').resizable();

And then try to add option:

$('.blabla').resizable("option","aspectRatio",true);

Nothing happens. By checking option-by-option I figured out that some of them work and some doesn't... What's the issue? For sure, 'aspectRatio' doesn't work and 'ghost' works.

Here is simple jsfiddle: http://jsfiddle.net/k8gY8/1/

Upvotes: 1

Views: 136

Answers (2)

artem_golovin
artem_golovin

Reputation: 154

There is a bug in Jquery UI. Especially, that one is almost 5(five!!!) years old and was reported many times on jquery ui forums. Here is the ticket: http://bugs.jqueryui.com/ticket/4186

Current workaround is like that:

(function() {
    var oldSetOption = $.ui.resizable.prototype._setOption;
    $.ui.resizable.prototype._setOption = function(key, value) {
        oldSetOption.apply(this, arguments);
        if (key === "aspectRatio") {
            this._aspectRatio = !!value;
        }
    };
})();

Upvotes: 0

Irvin Dominin
Irvin Dominin

Reputation: 30993

It seems to be a known issue: http://bugs.jqueryui.com/ticket/4186

So, as suggested, you can override the prototype mouseStart event:

$(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"]));
});

at the top of your code and il will work.

Demo: http://jsfiddle.net/ajYgM/

Upvotes: 1

Related Questions