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.
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 {
;
}
}