jQuery UI Widget Factory - JavaScript Reference Error function is not defined

Question

I am having issues with calling private/public functions within a custom dialog widget that I am trying to create. For some reason, when I try to call a method called _clean() from the _create() method, I keep getting an error in Firebug saying that there is a "Reference Error: _clean is not defined". Here is my code:

(function($, window, document, undefined) {
$.widget("ui.supernovae", $.ui.dialog, {
    options: {
        // default options
        height: 700,
        width: 1500,
        maxWidth: 1500,
        autoOpen: false,
        disabled: true,
        draggable: false,
        title: "Supernovae v0.1",
        resizable: false,
        modal: true
    },

    _create: function() {
                $.ui.dialog.prototype._create.apply(this);  //call the constructor of the ui.dialog widget

                //set the variables needed - cache when appropriate
                var self = this.element,
                   options = self.options,
                   childList = self.find( "#supernovaTabs > li" )
                   progressBar = self.children( "#progressbarSupernova" ),
                    tabContent = $("#supernova_tab_content").children("div");

                var pvalue = 0;

                progressBar.progressbar({value: 33.3}); // set up the progress bar
                tabContent.find( "button" ).button({ icons: { primary: "ui-icon-search" } });

                $("#search1").bind('click', function(){
                    _clean(1);   // here is where the reference error occurs
                    var the_name = String($("#obj_name").val());
                    console.log("The name: " + the_name);
                    search(the_name, null, null, null);
                });

                $("#search2").bind('click', function(){
                    _clean(2);
                    var the_ra = parseFloat($("#obj_ra").val());
                    var the_dec = parseFloat($("#obj_dec").val());
                    var the_eplison = parseFloat($("#obj_epsilon").val());
                    search(null, the_ra, the_dec, the_eplison);
                });

                childList.on("click", function(event){
                   event.preventDefault();
                   childList.removeClass("selectedSupernovaTab");
                   $(this).addClass("selectedSupernovaTab");

                    tabContent.hide(); //Hide all tab content

                    //handle the progressbar animations to align correctly with the list items above
                    switch($(this).index()){
                        case 0:
                            pvalue = "33%";
                            break;
                        case 1:
                            pvalue = "66.4%";
                            break;
                        case 2:
                            pvalue = "100%";
                            break;
                    }
                   progressBar.children( ".ui-progressbar-value" ).animate({width: pvalue}, 700, 'easeOutCubic'); //animate the progressbar 

                    var activeDivId = $(this).find("a").attr("href");
                    $(activeDivId).fadeIn();
                });            
    },

    _clean: function(type) {
               $("div.item").remove();
           if(type == 1){
                 $("#obj_ra").val('');
                 $("#obj_dec").val('');
                 $("#obj_epsilon").val('');
           }else if(type == 2){
                 $("#obj_name").val('');
           }else{
                 ;
           }
    }
});     

})(jQuery, window, document);

function initSupernovaeExt(){
$("#supernovae").button({
    label:"Supernovae v0.1",
    icons: {primary:"ui-icon-snicon"}
});

$("#supernovae_dialog").supernovae({
    open: function( event, ui ) {
        //Set up the initial views
        tabContent.hide();  // Hide all tab content initially
        $("#searchSupernova").fadeIn({duration: 1000});     //fade in the first div content
    }
});

$("#supernovae").button().on("click.showSNExt", function(){
    $("#supernovae_dialog").supernovae("open");
});
}

I am probably missing something quite easy but I cannot seem to figure out why the function is not being called. I just want to make sure that I am binding the click handlers in the correct place and that the _clean() function is parsed before the handlers are bound. Thanks for all the help.

Answer 1

For anyone else who runs into this issue, I ended up figuring out the problem: I forgot to reference the widget instance with "this" when calling the "private" methods, and also when binding the click handlers, I realized that I had to save the "this" element (widget instance) in a separate variable before attempting to call the widget's methods using this._xxx(), otherwise the "this" would refer to the targeted element within the click handler. Here is my updated code:

_create: function() {
            $.ui.dialog.prototype._create.apply(this);  //call the constructor of the ui.dialog widget

            //set the variables needed - cache when appropriate
            var self = this.element,
                that = this,
                options = self.options,
                childList = self.find( "#supernovaTabs > li" )
                progressBar = self.children( "#progressbarSupernova" ),
                tabContent = $("#supernova_tab_content").children("div");

            var pvalue = 0;

            progressBar.progressbar({value: 33.3}); // set up the progress bar
            tabContent.find( "button" ).button({ icons: { primary: "ui-icon-search" } });

            $("#search1").on('click', function(){
                that._clean(1);   // here is where the reference error occurs
                var the_name = String($("#obj_name").val());
                console.log("The name: " + the_name);
                //search(the_name, null, null, null);
            });

            $("#search2").on('click', function(){
                that._clean(2);
                var the_ra = parseFloat($("#obj_ra").val());
                var the_dec = parseFloat($("#obj_dec").val());
                var the_eplison = parseFloat($("#obj_epsilon").val());
                //search(null, the_ra, the_dec, the_eplison);
            });

            childList.on("click", function(event){
               event.preventDefault();
               childList.removeClass("selectedSupernovaTab");
               $(this).addClass("selectedSupernovaTab");

                tabContent.hide(); //Hide all tab content

                //handle the progressbar animations to align correctly with the list items above
                switch($(this).index()){
                    case 0:
                        pvalue = "33%";
                        break;
                    case 1:
                        pvalue = "66.4%";
                        break;
                    case 2:
                        pvalue = "100%";
                        break;
                }
               progressBar.children( ".ui-progressbar-value" ).animate({width: pvalue}, 700, 'easeOutCubic'); //animate the progressbar 

                var activeDivId = $(this).find("a").attr("href");
                $(activeDivId).fadeIn();
            });            
},

_clean: function(type) {
           $("div.item").remove();
           if(type == 1) {
               $("#obj_ra").val('');
               $("#obj_dec").val('');
               $("#obj_epsilon").val('');
           } else if(type == 2) {
               $("#obj_name").val('');
           } else {
             ;
           }
}