CODEWITHSUNDEEP
javascriptyui
mahulst
mahulst

Reputation: 443

Iterate through all YUI widgets

I am looking for a way to iterate through all YUI widgets. I would like to be able to call a function on all the widgets.

I tried to select all the element with the class yui3-widget, but that way i only get the div element the widget is rendered to. What I want is all the objects. So this doesn't seem to do what I want:

YUI().use ('*', function (Y){
    $('.yui3-widget').each (function (idx, elem) {
        var id = elem.getAttribute('id');
        console.log (Y.Widget.getByNode(id));
        console.log ('#'+id);
    })
})

Do any of you have a suggestion how this is possible?

Upvotes: 3

Views: 973

Answers (1)

mjhm
mjhm

Reputation: 16705

Three things to look at:

.1. Combining libraries (YUI and Jquery) is possible but highly confusing. Though we can assume that it's necessary and roll with it.

.2. "getByNode" is expecting a YUI Node or a selector string. So that line should read:

console.log (Y.Widget.getByNode('#' + id));

.3. The YUI().use (... line is declaring a new YUI sandbox, which doesn't contain any widgets. Your node list is looping over all the matching ".yui3-widget" items on the page, but none of those widgets are registered within your new sandbox, so Y.Widget.getByNode('#' + id) will return null. To correct this you need to put your code within the sandbox that created the widgets or get a pointer to that sandbox for your "use" function call. Something like:

var sandbox = YUI().use('*', function (Y){

   // widgets defined here
});

sandbox.use ('*', function (Y){
    $('.yui3-widget').each (function (idx, elem) {
        var id = elem.getAttribute('id');
        console.log (Y.Widget.getByNode('#' + id));
        console.log ('#'+id);
    })
});

Upvotes: 3

Related Questions