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

Question

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.

Also note: "Please remember jQuery UI is in a maintenance state no new significant feature work is planned" see: https://blog.jqueryui.com/2022/01/jquery-ui-1-13-1-released/ — Yogi, Apr 06 '22 at 18:18

score 0 · Answer 1 · answered Jun 24 '12 at 07:15

0

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.

answered Jun 24 '12 at 07:15

Stephen

5,362
1
22
33

thank. what do you mean by "jquery exports are setup properly"? – Roy Tsabari Jun 24 '12 at 07:19
1

Well, it looks like you're using requirejs. jQuery doesn't "just work" (at least the last time I checked) with requirejs, there's a bit of work needed to make sure that requirejs knows what to return when you include jquery. Same with jquery ui. So, the assumption is that you've already worked through that. – Stephen Jun 24 '12 at 08:33
As a thought, try "console.log($.browser)" right before defining your view. You should get a bunch of information about your browser. If you get an undefined/null/empty response in your console, you know that jquery isn't properly hooked up. – Stephen Jun 24 '12 at 08:35
I think that the problem is not with jQuery, because calling `$('.loading').show();` is working. The problem is only with jQueryUI – Roy Tsabari Jun 24 '12 at 10:58
Well, unfortunately then I'm just as stumped. I'd need to see more code, how the jquery ui stuff is hooked up, what your config for requirejs looks like, etc. The last thought I've got is that on my project that uses jquery ui, we have a 'shim' specified in the config: {shim: { 'lib/jquery-ui': {deps: ['jquery'] } }} Not sure if that would help at all.. but it's worth a shot. – Stephen Jun 24 '12 at 19:29

score 0 · Answer 2 · answered Jun 26 '12 at 11:24

0

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..."
});

answered Jun 26 '12 at 11:24

Roy Tsabari

2,000
6
26
41

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

2 Answers2