help with literal syntax - not a function

Question

I keep trying to call getMonthDay function. I am passing a pubDate parameter and keep getting error - Break on ErrorXCopyDisableContinue this.getMonthDay is not a function

Any ideas?

$(document).ready(function(){
    alert = console.log; 


    var ns = {

        init : function(){
            $.ajax({
                url: '/calendar/RSSSyndicator.aspx?type=N&number=15&category=8-0%2c4-0%2c6-0%2c10-0%2c7-0%2c17-0%2c16-0%2c9-0%2c5-0%2c3-0%2c2-0&department=3&numdays=31&ics=Y&rsstitle=Annandale+-+Event+Listing&rssid=11',
                success: this.loaded                
            });
        }, 

        loaded: function(data){

            // Find item from the RSS document and iterate over reach one.
            $(data).find('item').each(function(i, value){

                // Set the title and get rid of all chars including and between ()
                var title = $(this).find('title').text().replace(/\w+\s+\(.*?\)/, "");

                var link = $(this).find('link').text();
                var pubDate = $(this).find('pubDate').text();
                alert(title); 
                alert(link);
                alert(pubDate);

                test = this.getMonthDay(pubDate);


                $('#events').append("<p>" + title + "<br/>" + link + "</p>");

            });

        //  var t = items[0].getElementsByTagName('title');
        //  alert(t[0].firstChild.nodeValue);

        }, 



        getMonthDay : function(pubDate){

            var d = new Date(pubDate);

            d.month = d.getMonth();
            var months = ["January", "February", "March", "Thursday", "Friday", "Saturday", "Sunday"];
            var month = months[d.month]
            var newMonthDay = month + " " + d.getDay();

            return newMonthDay;


        }

    }



    ns.init();




});

Answer 1

There are actually 2 issues here. The most immediate/local is that this refers to that <item> element you're on in the .each() loop, we can fix that by holding a reference outside to this, like so:

var self = this;

Then inside the function, use self.getMonthDay(pubDate);. Second, after that's fixed...even then this isn't what you want, it refers to the options object you passed to $.ajax(). To remedy this, you need the context option there to maintain this being ns as well, like this:

$(document).ready(function(){
    alert = console.log; 
    var ns = {
        init : function(){
            $.ajax({
                url: '/calendar/RSSSyndicator.aspx?type=N&number=15&category=8-0%2c4-0%2c6-0%2c10-0%2c7-0%2c17-0%2c16-0%2c9-0%2c5-0%2c3-0%2c2-0&department=3&numdays=31&ics=Y&rsstitle=Annandale+-+Event+Listing&rssid=11',
                context: this,          //add this!
                success: this.loaded                
            });
        }, 
        loaded: function(data){
            var self = this;           //maintain a reference to this
            $(data).find('item').each(function(i, value){
                var title = $(this).find('title').text().replace(/\w+\s+\(.*?\)/, "");
                var link = $(this).find('link').text();
                var pubDate = $(this).find('pubDate').text();
                var test = self.getMonthDay(pubDate);
                $('#events').append("<p>" + title + "<br/>" + link + "</p>");
            });
        }, 
        getMonthDay : function(pubDate){
            var d = new Date(pubDate);
            d.month = d.getMonth();
            var months = ["January", "February", "March", "Thursday", "Friday", "Saturday", "Sunday"];
            var month = months[d.month]
            var newMonthDay = month + " " + d.getDay();
            return newMonthDay;
        }
    }
    ns.init();
});

Answer 2

You're calling this.getMonthDay from within the callback you're passing to .each(). At that point, this is a completely different context. Instead, consider something like:

loaded: function(data){

    var ns = this;

    // Find item from the RSS document and iterate over reach one.
    $(data).find('item').each(function(i, value){

        // Set the title and get rid of all chars including and between ()
        var title = $(this).find('title').text().replace(/\w+\s+\(.*?\)/, "");

        var link = $(this).find('link').text();
        var pubDate = $(this).find('pubDate').text();
        alert(title); 
        alert(link);
        alert(pubDate);

        test = ns.getMonthDay(pubDate);


        $('#events').append("<p>" + title + "<br/>" + link + "</p>");

    });

//  var t = items[0].getElementsByTagName('title');
//  alert(t[0].firstChild.nodeValue);

}, 

Note the creation of an alias (ns) for this, which can then continue to refer to that object regardless of what objects/contexts might later come into play.