How to call jQuery widget public method outside using plugin reference

Question

I have created a plug-in popup and trying to create reference and access the public method of the plug-in but it is giving an error 'Undefined Function'.

 var pop = $('.divCls').popup();
   pop.setTitle('Sample Text');//This is line giving error

Here is my plug-in

(function ($) {
    $.widget('bs.popup', {
        options:{
//            containment: '.bs-editor-body',
            hideOnClick: '.bs-editor-body',
            showTimeDelay:0
        },
        _create: function (){
            var me = this,
                el = me.element,
                opts = me.options;

            el.addClass('bs-popup');
            el.html($('<div class="bs-popup-body">' + el.html() + '</div>'));
            el.body = el.find('.bs-popup-body');

           me._refresh();
           if(opts.draggable){
                el.draggable({containment:'document',cancel:'.bs-popup-body'});
                el.unbind().bind('click',function(event){
                    event.stopPropagation();
                });
            }
           $(document).on('click','body',function(){
               me.hide();
           });
            me.show();
        },
        _init:function(){
            this.show();
            this._refresh();
        },
        _refresh:function(){
            var me = this,
                el = me.element,
                opts = me.options;
            el.find('.bs-popup-header').remove();
            if(opts.title && opts.title !='') {
                el.prepend('<div class="bs-popup-header"></div>');
                el.hdr = el.find('.bs-popup-header');
                me.setTitle(opts.title);
                el.body.css({'border-top-left-radius':0,'border-top-right-radius':0})
            } else {
                el.body.css({'border-radius': el.body.css('border-bottom-left-radius')})
            }
            if(opts.width)me.setWidth(opts.width);
            if(opts.height)me.setHeight(opts.height);
            if(opts.left && opts.top) me.setXY(opts.left ,opts.top);
            if(opts.cls) el.addClass(opts.cls);
        },
        show: function () {
            debugger;
            this.hide();
            this.element.show(this.options.showTimeDelay);
        },
        hide: function () {
            this.element.hide();
            this._destroy();
        },
        setTitle:function(title){
            this.getHeader().text(title);
        },
        setXY: function (x,y){
            var me = this,
                el = me.getElement(),
                opts = me.options;
            if (x && y) {
                el.css({'left': x, top: y});
            } else {
//                var confine = evtRef.closest(opts.containment);
            }
        },
        setWidth: function (value){
            this.getBody().css({width: value});
        },
        setHeight: function (value) {
            this.getBody().css({height: value});
        },
        getElement:function(){
            return this.element;
        },
        getHeader:function(){
           return this.element.hdr;
        },
        getBody:function(){
            return this.element.body;
        },
        _destroy:function(){
//          $.Widget.prototype.destroy.call(this);
        }
    });
}(jQuery));

Answer 1

You can try

pop.popup('setTitle', 'Sample Text');

Widget Method Invocation

To invoke a method using the widget's plugin, pass the name of the method as a string.

Widget Public Methods