How to pass a jQuery UI widget into a function?

Question

I have two functions which perform the same operations against two different widget types. I thought I had figured out an implementation which would allow me to use one generic function instead of two. The idea was that I would pass each type of widget into this generic function. However, I am struggling with the details:

Here are my two functions which repeat a lot of their code:

buildTemplateLookupTreeDialog: function () {
    lookupTreeViewDialog.bind('loaded.jstree', function () {
        var templateID = workflowDialogContent.find('#DeviceTemplateID').val();
        lookupTreeViewDialog.TemplateLookupTree('setSelectedNode', '#' + templateID);
        lookupTreeViewDialog.TemplateLookupTree('saveCookie');
    }).TemplateLookupTree();

    lookupTreeViewDialog.TemplateLookupTree('onNodeDblClick', function (template) {
        if (openDialog != null) {
            openDialog.TemplateLookupTree('saveCookie');
            openDialog.data('result', { id: template.id, name: template.name });
            openDialog.dialog('close');
        }
    });
},
buildComponentLookupTreeDialog: function () {
    lookupTreeViewDialog.bind('loaded.jstree', function () {
        var componentID = workflowDialogContent.find('#DeviceComponentID').val();
        lookupTreeViewDialog.ComponentLookupTree('setSelectedNode', '#' + componentID);
        lookupTreeViewDialog.ComponentLookupTree('saveCookie');
    }).ComponentLookupTree();

    lookupTreeViewDialog.ComponentLookupTree('onNodeDblClick', function (component) {
        if (openDialog != null) {
            openDialog.ComponentLookupTree('saveCookie');
            openDialog.data('result', { id: component.id, name: component.name });
            openDialog.dialog('close');
        }
    });
}

and here is what I thought a generic implementation could look like:

buildGenericLookupTreeDialog: function (lookupTreeWidget, title, idSelector, nameSelector) {
    lookupTreeViewDialog.bind('loaded.jstree', function () {
        var selectedNodeID = workflowDialogContent.find(idSelector).val();
        lookupTreeViewDialog.lookupTreeWidget('setSelectedNode', '#' + selectedNodeID);
        lookupTreeViewDialog.lookupTreeWidget('saveCookie');
    }).lookupTreeWidget();

    lookupTreeWidget('onNodeDblClick', function (node) {
        if (openDialog != null) {
            lookupTreeWidget('saveCookie');
            openDialog.data('result', { id: node.id, name: node.name });
            openDialog.dialog('close');
        }
    });
}

//Called like so
this.buildGenericLookupTreeDialog(TemplateLookupTree, 'Select Template', '#DeviceTemplateID', '#DeviceTemplateName');

Now, this code immediately throws an error --TemplateLookupTree not defined. It appears that I can't reference the widget by its name unless I am actually initializing it (e.g. lookupTreeViewDialog.TemplateLookupTree());

If I initialize TemplateLookupTree before passing into buildGenericLookupTree -- I receive errors whenever lookupTreeWidget is used liked a function.

Any suggestions on how to DRY this code?

Community · Accepted Answer · 2017-05-23 12:04:41Z

1

Pass in the lookup tree widget name as string and checkout this thread for information about how to call it: How to execute a JavaScript function when I have its name as a string

edited May 23, 2017 at 12:04

CommunityBot

11 silver badge

answered Oct 19, 2012 at 22:53

Sebastian Meine

11.9k1 gold badge34 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to pass a jQuery UI widget into a function?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related