SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Zealot
    Join Date
    Jul 2007
    Posts
    170
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    how to call inner method?

    Hi I have this javascript code which I would like to call the refresh method in my init function but I can't seems to be able to call it. What is the proper way of doing this?

    PHP Code:
    $.fn.plug = function() {

            
    this.init = function( ) {
                
    this.refresh()
            }

            
    this.refresh = function( ) {
                 
    alert("call")
            } 
    Thanks in advanced.
    I Dunno LOL \(_o)/

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,682
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    The advised way of constructing plugin methods is found over at jQuery's Plugin Methods tutorial.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Enthusiast Anthony.Barnes's Avatar
    Join Date
    Aug 2011
    Location
    Canberra, Australia
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    'this' is a reference to the current function being executed, and you've used it in the wrong context. An easy way around it is to store the reference to the function:

    Code:
    $.fn.plug = function() {
       var self = this;
       self.init = function( ) {
            self.refresh()
       }
       self.refresh = function( ) {
           alert("call")
       }
    };

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,682
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Anthony.Barnes View Post
    'this' is a reference to the current function being executed, and you've used it in the wrong context. An easy way around it is to store the reference to the function:
    With what you've provided there, how do you propose that he calls the plug() method so as to run the init function?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Zealot
    Join Date
    Jul 2007
    Posts
    170
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you Paul and Anthony, I'll have a read and try on that.
    I Dunno LOL \(_o)/

  6. #6
    SitePoint Enthusiast Anthony.Barnes's Avatar
    Join Date
    Aug 2011
    Location
    Canberra, Australia
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    With what you've provided there, how do you propose that he calls the plug() method so as to run the init function?
    I edited my post re-stating your advice for the jQuery plugin methods (looks like I neglected to save the changes). Creating a plugin with functions assigned like this is a bad idea because 'this' refers to the jQuery collection object and not the calling plugin function. So the short answer is, he couldn't with any safety.

    If the plugin had to contain several methods that were quite complicated and the methods had to be available externally I'd probably lean towards creating a custom object:

    Code:
    function moreComplicated(selector) {
        this.$collection = $(selector);
        this.refresh();
    }
    
    moreComplicated.prototype.refresh = function(){
        alert('call');
    };
    
    var whatever = new moreComplicated('body');

  7. #7
    SitePoint Zealot
    Join Date
    Jul 2007
    Posts
    170
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If I use the jquery way, how do I then call the inner method?

    Given the example:
    PHP Code:
    (function( $ ){

      var 
    methods = {
        
    init : function( options ) { 
            
    // How do I call refresh? this.refresh() doesn't work.
            // this.tooltip ("refresh"); also doesn't work
        
    },
        
    refresh : function( content ) {
            
    alert("test")
        }
      };

      $.
    fn.tooltip = function( method ) {
        
        
    // Method calling logic
        
    if ( methods[method] ) {
          return 
    methodsmethod ].applythis, Array.prototype.slice.callarguments));
        } else if ( 
    typeof method === 'object' || ! method ) {
          return 
    methods.init.applythisarguments );
        } else {
          $.
    error'Method ' +  method ' does not exist on jQuery.tooltip' );
        }    
      
      };

    })( 
    jQuery ); 
    I Dunno LOL \(_o)/

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,682
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by justspree View Post
    If I use the jquery way, how do I then call the inner method?
    Do you see this bit?

    Code javascript:
    } else if ( typeof method === 'object' || ! method ) {
      return methods.init.apply( this, arguments );

    When you call the plugin with no parameters, or with an object, the init method will be called automatically for you.

    $().tooltip()
    or
    $().tooltip({someProp: 'someValue'})

    This part of the code allows different behaviour:

    Code javascript:
    if ( methods[method] ) {
      return methods[ method ].apply( this, Array.prototype.slice.call(

    If you want to run the refresh method, you would call the plugin with the string 'refresh'
    $().tooltip('refresh')

    and you can also pass any number of parameters after the 'tooltip' string too
    $().tooltip('refresh', someValue, anotherValue)

    or if you prefer to pass them as an object:
    $().tooltip('refresh', {someProp: someValue, anotherProp: anotherValue})
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    SitePoint Zealot
    Join Date
    Jul 2007
    Posts
    170
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks alot for the detail explaination Paul!
    I Dunno LOL \(_o)/

  10. #10
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,682
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    On the other question of:

    Quote Originally Posted by justspree View Post
    // How do I call refresh? this.refresh() doesn't work.
    // this.tooltip ("refresh"); also doesn't work
    They are in the methods object, so from within your plugin you would use methods.refresh() to call that function.
    The this keyword is a reference to the jQuery object.

    Using this.tooltip('refresh') should work (and does in my test), but methods.refresh() is the preferred usage.

    Do you want to investigate the this.tooltip thing more closely?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  11. #11
    SitePoint Zealot
    Join Date
    Jul 2007
    Posts
    170
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul! Just saw your reply, I didn't realize I can use methods.refresh? Currently even in the methods, I use $( ).tooltip("refresh"), I'll try this in a while.

    By the way, how about setting and passing global variables? Global variables meaning inside the plugin itself. Like for example:

    PHP Code:
    (function($) {

        
    //  defining some plugin global variables
        
    var state null;
        
        var 
    methods  = {
            
    init : function( opts ) {
                 
    state 0;  // example
            
    },

            
    refresh: function( opts ) {
                 if( !
    state state 1// example
            
    }
        }
    }) 
    Currently I'm using it this way. Is it correct?
    I Dunno LOL \(_o)/

  12. #12
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,682
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by justspree View Post
    Currently I'm using it this way. Is it correct?
    Yes, that's a good way to use it.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •