jQuery UI resizable/selectable not working in Backbone View

Question

I have a view for my model, and in the initialization I use the following code

initialize: function (){
        _.bindAll(this, 'render'); 
        this.listenTo(this.model, "change", this.render);
        this.$el.draggable({
            opacity: 0.5,
            containment: "parent"
        });
        this.$el.resizable();
        this.$el.selectable();
    },

Although draggable works, resizable and selectable do not (I haven't tested other jQuery UI interactions to check if they work). I tried placing this.$el.resizable inside the render function, but that wouldn't work either. I'm using jQuery 1.8.3 and jQuery UI 1.9.2 (I do include the necessary jquery-ui.css in my html). When the view renders, I inspect the element in my browser and it does indeed have a class of ui.draggable, ui.resizable and ui.selectable as it is supposed to, yet it's only draggable.

Trying to work around this issue, I've used CSS3 property resize: both in the class of the element I want to resize and it works just fine, but I'd really like to utilize jQuery UI for resizing, and I'm curious why it won't work.

Any ideas what I might be doing wrong?

EDIT: Added jsfiddle example http://jsfiddle.net/IgnorantUser/u7JkX/ the problem described is in the initialization of the ButtonInCanvas backbone view

Answer 1

ok so, apparently using this.$el.html(this.template(this.model.toJSON())); in my render function on the ButtonInCanvas view was causing the problems. The aforementioned gets the "caption" attribute of the model, and passes it into the view as html content.

There solution is to put this.$el.html(this.template(this.model.toJSON())); in the init function. In case it's needed to be done in the render function, there should be another div, within the one we want to resize, that will get the caption property from the model. In the following JSBIN you can see a solution using a div inside the button. (thanks to user shoky, from the #jquery freenode irc channel for the implementation and his heads up) http://jsbin.com/uxequq/1/edit

I don't really understand why the problem was occurring though (maybe this.template(this.model.toJSON()) in my render function, was causing a re-rendering of the view?) so feel free to point me out why, and help me understand further!

Cheers!