1

I admittedly know little javascript, jquery, or oop, but I know enough to piece things together and sometimes get them to work. This however is over my head, and despite what I google I can't make heads or tails of what's going on. This is the gist of my code:

jQuery(document).ready(function($) {

    var methods = {
        init : function( options ) { 
            if (somthing) {
                this.latlng(input);//  <--- ERROR: Object has no method
            }
        },
        auto : function( ) {
            if (something) {
                this.latlng(input);
            } else {
                this.location(input);
            }
        },
        location : function ( input ) {
            // draw map
        },
        latlng : function ( input, l ) {
            // draw map
        }
    }

    $.fn.codeAddress = function( method ) {
        // Method calling logic
        if ( methods[method] ) {
            return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
        } else if ( typeof method === 'object' || ! method ) {
            return methods.init.apply( this, arguments );
        } else {
            $.error( 'Method ' +  method + ' does not exist on jQuery.tooltip' );
        }  
    };

    var geo = new $(document).codeAddress(); // Initialize the object   
});

I relied on jQuery Docs Plugin/Authoring as my template and began piecemealing from there. Ideally it loads init() on it's own when the document is ready, but it wouldn't so I added the second to last line to initialize the object.

A map is initially created in init() using method latlng() to draw it. That's where I get the error on line 6, this.latlng(input) Uncaught TypeError: Object [object Object] has no method 'latlng'. Thereafter an onclick eventhandler calls auto() to redraw the map depending on the input it receives.

I apologize if my explanation and/or code is a junkshow. I'm trying to learn as I go.

3 Answers3

0

You need to say something like this:

methods['latlng'].apply(this);

The reason is because the value of this is not your plugin. you should actually log the value of this to the console for more insight but effectively, you've declared an object inside your plugin called methods. latlng is in the context of that object. in order to call it, you reference it by its key (latlng) and call the .apply() method.

jahroy
  • 22,322
  • 9
  • 59
  • 108
Brad
  • 6,106
  • 4
  • 31
  • 43
  • Great, that got me over that hurdle. I'm pretty sure I understand what your saying. Two questions, what would logging the value of this gain me, and how would I pass the value of the latlng key when I apply it? – brandonhowlett Apr 16 '13 at 22:17
  • the value of 'this' can get tricky in JS because it changes depending on the context. console.log(this) can be a helpful tool to figure out what value of various things are in different contexts. As for passing values, add a second argument is for your args array. ie .apply(this, [argsArray]) check this out http://stackoverflow.com/questions/1986896/what-is-the-difference-between-call-and-apply – Brad Apr 16 '13 at 22:21
0
return methods.init.apply( methods, arguments );
Aleko
  • 960
  • 1
  • 9
  • 10
0

In the code of jQuery plugins, this is a reference to the jQuery object wrapping the DOM element being iterated over at the time.

In your case, you've manually attached your plugin to document.
(You should do this in your site's code, not inside the plugin file)

In any case, instead of calling this.latlng() you can reference your plugin with this.codeAddress( 'latlng' );.

This is the intended functionality of jQuery plugins, and it keeps things clean if you access them this way.

rockerest
  • 10,412
  • 3
  • 37
  • 67