Javascript: Object has no method when using prototypes

Question

Why do I have to call new Chart() to fire a method from the same class(per say)? Is this the correct way to do this? Thanks.

  function Chart(location, startDateString, endDateString) {  

    this.location = location;
    this.startDateString = startDateString;
    this.endDateString = endDateString;
}


Chart.prototype.fnDrawStaticChart = function(chartUrl, chartData) {

    $.get(chartUrl, function() {                       
        $('#'+chartData.wrapSpecId).attr('src', chartUrl);                             
    });      
}

Chart.prototype.fnDraw = function(fnStaticChartJSON, fnStaticChartImage) {        

    $.getJSON(fnStaticChartJSON, function(data) { 

        if (data.chartData.length > 0) {    

            $('#chartDiv').append($('#template').jqote(data, '@'));       

            $.each(data.chartData, function(index, chartData) { 

                var pkgLineId = chartData.wrapSpec2.pkgLineId.pkgLineId;             
                var wrapSpecId = chartData.wrapSpecId;
                var startDate = data.startDate;
                var endDate = data.endDate;

                var chartUrl = fnStaticChartImage({
                    pkg_line_id: pkgLineId, 
                    wrap_spec_id: wrapSpecId, 
                    start_date: startDate, 
                    end_date: endDate
                });

                this.fnDrawStaticChart(chartUrl, chartData); //can't do this.  
                new Chart().fnDrawStaticChart(chartUrl, chartData); CAN do this.



            });      
    }); 
}

Daff · Accepted Answer · 2011-07-13 21:40:27Z

2

It's a simple scoping issue. this points to the function you passed to $.each. You have to store the old this reference in another variable:

Chart.prototype.fnDraw = function(fnStaticChartJSON, fnStaticChartImage) {        
    var self = this;
    $.getJSON(fnStaticChartJSON, function(data) { 

        if (data.chartData.length > 0) {    

            $('#chartDiv').append($('#template').jqote(data, '@'));       

            $.each(data.chartData, function(index, chartData) { 

                var pkgLineId = chartData.wrapSpec2.pkgLineId.pkgLineId;             
                var wrapSpecId = chartData.wrapSpecId;
                var startDate = data.startDate;
                var endDate = data.endDate;

                var chartUrl = fnStaticChartImage({
                    pkg_line_id: pkgLineId, 
                    wrap_spec_id: wrapSpecId, 
                    start_date: startDate, 
                    end_date: endDate
                });

                self.fnDrawStaticChart(chartUrl, chartData);
                new Chart().fnDrawStaticChart(chartUrl, chartData);
            });      
    }); 
}

answered Jul 13, 2011 at 21:40

Daff

44.4k9 gold badges108 silver badges122 bronze badges

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

2 Comments

Drew H Over a year ago

Ok cool. So why can't I just call it like this.fnDrawStaticChart() ? Does "this" refer to something in $.getJSON?

Daff Over a year ago

No, this always refers to the current scope of the function you are in, in your case the function(index, chartData) you passed to $.each().

Collectives™ on Stack Overflow

Javascript: Object has no method when using prototypes

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related