Roy Tsabari
Roy Tsabari

Reputation: 2040

Can't call jQuery-UI function in Backbone.js view

I have a web app and I use Backbone.js.

In the Login view I use jQuery UI button. In the template code I call $(".btn").button(); with no problem.

But when I want to act after the user clicks the button and call:

$('#btnSubmit').button({
   disabled : true,
   label : "Logging in..."
});

I get the error:

"Uncaught TypeError: Object [object Object] has no method 'button'"

(copied from Chrome devTools console).

The weird thing is that if I run this code lines in chromeDevtools console, it works perfectly! I think it is related to the DOM and the state I'm in when the even is firing. Any idea what is the problem?

Some details:

Including the jQuery UI library:
define([
   'jQuery',
   'jQueryui',
/*...*/
], function($, jQueryui,...) {
var loginView = Backbone.View
   .extend({
/*...*/
   events : {
      "click #btnSubmit" : "login"
      },
/*...*/
   login : function() {
      $('#btnSubmit').button({
         disabled : true,
         label : "Logging in..."
         });
   },
}
});

   return new loginView;
});

Edit:

I tried Stephen solution and tried to use:

this.$el.find('#btnSubmit').button({
     disabled : true,
     label : "Logging in..."
});

Still not working. I think it means that I can't access all jQuery UI functionality.

Upvotes: 0

Views: 638

Answers (2)

Roy Tsabari
Roy Tsabari

Reputation: 2040

I found the mistake: I should have use the jQueryUI reference I pass to the function this way:

jQueryui('#btnSubmit').button({
    disabled : true,
    label : "Logging in..."
});

Upvotes: 0

Stephen
Stephen

Reputation: 5470

One thing to try is to look up the element like this:

this.$el.find('#btnSubmit').button({
     disabled : true,
     label : "Logging in..."
});

Even if the document isn't attached to the DOM, you'll be able to look it up. That's my only guess, as I'm assuming that all the jquery exports are setup properly.

Upvotes: 0

Related Questions