Search jQuery

jQuery Forum

Add a new method to a jQuery UI widget

in Using jQuery UI • 6 years ago

The technique described in the docs for extending UI widgets works for me when extending an existing method, but not when trying to add a new one.

Rather than repeat the details here, here's my SO question in full:
http://stackoverflow.com/questions/42024327/add-a-new-method-to-a-jquery-ui-widget

Thanks in advance for any ideas.

Replies(11)

watusiware

Re: Add a new method to a jQuery UI widget

6 years ago

"Doesn't work" doesn't tell us much!

There are 3 cases:

1. EXTEND an existing method: call this._super() to run the original code. The example shows calling it AFTER your code is run, and combines it with the necessary return of this (for chaining). But there might be cases where you might like to run the original code FIRST or even in the MIDDLE of your method somewhere.

2. REPLACE an existing method. Just omit call to this._super(). You still need to return this.

3. ADD a new method. Same as (2). You will not call this._super(), as there is no original method to call. You still need to return this.

sparkpool

Re: Add a new method to a jQuery UI widget

6 years ago

Thanks for jumping in.

My apologies, the initial SO post didn't say what the error was, I added it a little bit later. It's this:

"Uncaught TypeError: $(...).url is not a function"

If you look at the code in the SO post, I believe it's pretty much exactly as your case #3. Or am I missing something?

watusiware

Re: Add a new method to a jQuery UI widget

6 years ago

You still need to return this.

sparkpool

Re: Add a new method to a jQuery UI widget

6 years ago

I'm an idiot. I was returning this, as you'll see in the SO code, but...

The original "$(...).url is not a function" error I saw was caused by calling the method incorrectly. I was using the old-style $(...).url(...) syntax, needs to be $(...).tabs('url', ...).
Mark on SO was right that in this plugin context .data() is wrong, needs to be $(this.anchors[index]).attr("href", url)

Thanks for you help in any case.

Now someone should explain to me why such a simple and useful method as url was removed from the Tabs API...

jakecigar

Re: Add a new method to a jQuery UI widget

6 years ago

I came up with…

$.widget("ui.tabs", $.ui.tabs,
{
url: function (index, url)
{
var anchor=$(this.anchors[index]),
res = url ? anchor.attr("href", url) : anchor.attr("href");
console.log(["DEBUG",anchor,index,url,res]);
return res
}
});
$(function(){
$("#tabs").tabs()
$("#tabs").tabs("url",1,"/test.cgi")
})

It changes the url, and I can verify it with

$("#tabs").tabs("url",1)

jQuery UI 1.9 Upgrade Guide | jQuery UI has a link to the reason it was deprecated and later removed.

JΛ̊KE

sparkpool

Re: Add a new method to a jQuery UI widget

6 years ago

Thanks Jake, I got there as you see in the post above yours. I don't understand the deprecation notice though.

If I have a tab whose remote URL needs to change dynamically, what's the recommended best practice, other than writing a method like this?

Maybe url should have been renamed href, rather than removed? Or am I missing the point?

jakecigar

Re: Add a new method to a jQuery UI widget

6 years ago

My solution has a getter and a setter, yours only has a setter.

There are a lot of reasons the UI team has for the things they do. For some reason we are to use an aria attribute. I don’t know why or what that buys anyone.

It was 6 years ago, and before today, I hadn’t ever seen a need for this. I would have always used…