Question

I have a backbone/rails app that uses local storage and jquery ui. I developed it on one Rails 3.2.8 application, got it working, and then copied the code to the application (also Rails 3.2.8) that I use on the server, but before I pushed it to the server, I tested it on local host. Strangely, it doesn’t work on the Rails app that’s destined for the server. Just one jQuery ui method is causing me a problem on the new app, throwing this error.

Object [object Object] has no method 'sortable' 

When I comment out the sortable code from the render function below, the app works fine
The version of jQuery is the same (1.8) in both apps as is the jQuery ui version (1.9.2) (the versions of backbone are the same too). I checked the page source for both apps, and the files are being loaded in the same order. While the original app works on both Chrome and Firefox, The one twist is that I’m getting the same error on both applications in Safari. I cleared the cache in every browser. The code is wrapped in this $(function(){ });

$(function() {

    ...ommitted code...

       window.App = new AppView();

});

However, I also tried to put document ready code around the initialization of the app view, but it didn’t change anything

$(document).ready(function() {

       window.App = new AppView();
});

Given the above (and the code below), does the fact that neither work properly in Safari, but the original app works in Chrome and Firefox (while the other doesn’t) indicate any possible problem area you could direct me to…Thank you in advance

Render function where sortable’s located

 render: function() {
            $(this.el).html(this.template(this.model.toJSON()));
             this.setText();
             var that = this;
             console.log(this.$("ul.bucket-companies"));
             this.$("ul.bucket-companies").sortable({
             dropOnEmpty: true,
             connectWith: "ul.bucket-companies",
             receive: function(event, ui) {
              var bucket = that.model;
              var id = $(ui.item[0]).attr("id");
              var company = Companies.get(id);
              var oldBucket = company.getBucket();

             company.setBucket(bucket.id);
             oldBucket.removeCompany(company.id);
             bucket.addCompany(company.id);
            }
           });
              return this;
            },

Update.

This is what the console.log in the render function shows console.log(this.$("ul.bucket-companies"));

[ul.bucket-companies, prevObject: i.fn.i.init[1], context: li.bucket-item, selector: "ul.bucket-companies", constructor: function, init: function…]
0: ul.bucket-companies
context: li.bucket-item
length: 1
prevObject: i.fn.i.init[1]
selector: "ul.bucket-companies"
__proto__: Object[0]
 feng.js:87

Answer 1

The problem was fixed by doing rake assets:precompile again on the rails app destined for the server (it had already precompiled once before when the app, minus this backbone component, was originally pushed to the server). Although I was going to compile the assets again when it came time to push, I’m surprised that subsequent precompile was necessary to test the new code on local host before pushing. I’m guessing that, having compiled once, and then adding more javascript (including jQuery UI) without compiling a second time mixed things together in an unfriendly way.