Comments for Truly Evil

Comment on Expanding the jQuery Plugin Development Pattern by Mike

Mike — Mon, 16 Nov 2009 14:33:43 +0000

Sorry but could you please let me know if this is possible at all or I will have to use some other way to do this. Many thanks in advance.

Comment on Expanding the jQuery Plugin Development Pattern by Mike

Mike — Mon, 09 Nov 2009 22:13:11 +0000

Great, I think we are almost there. So, my question is now: how can I call the getTrue function from outside of the plugin which needs the DOM object to be passed to the function. In other words what would I need to put inside $(’BODY’).myPlugin().getTrue( ??? );
I cant thank you enough for putting up with me.

Comment on Expanding the jQuery Plugin Development Pattern by jcfant

jcfant — Mon, 09 Nov 2009 20:15:59 +0000

@Mike

Hopefully I understand you correctly:

 
$.fn.testPlugin = function() {
    var self = this;
 
    this.getTrue = function(item) {
        console.log("TRUE ", item, $(item));
        return true;
    };
 
    var getFalse = function(item) {
        console.log("FALSE: ", item, $(item));
        return false;
    };
    this.each( function() {
        console.log(this);
        self.getTrue(this);
        getFalse(this);        
    });
 
    return this;
};
 
$(".content ol:first").testPlugin();

You can actually run this in firebug on this page and it will produce the following results.

Maybe if you pasted some code that isn’t working I could help walk you through it.

Comment on Expanding the jQuery Plugin Development Pattern by Mike

Mike — Mon, 09 Nov 2009 19:50:25 +0000

I am really sorry but it seems like I have failed to communicate my problem for 3 times now. How can I potentially do something with $(this) which is the DOM element inside the getTrue or getFalse functions unless I can somehow pass it to them? It would be great if you could give me a sample. Again I am not talking about the jquery object this but the $(this) DOM object inside the this.each{ function() …
Thanks a lot for all your help

Comment on Expanding the jQuery Plugin Development Pattern by jcfant

jcfant — Mon, 09 Nov 2009 19:28:21 +0000

@Mike Inside of getFalse you would have to use "self" to access "this". inside of getTrue, yes you should be able to access "this".

Comment on Expanding the jQuery Plugin Development Pattern by Mike

Mike — Mon, 09 Nov 2009 19:19:33 +0000

Thanks again for your prompt response. Let me ask it this way is there any way that I can access $(this) inside this.each( function() { … inside the getTrue or getFalse functions that you have defined.

Comment on Expanding the jQuery Plugin Development Pattern by jcfant

jcfant — Fri, 06 Nov 2009 17:14:44 +0000

@Mike

It truly depends on how you scope your functions.

$.fn.myPlugin = function(opts){
  var self = this;
  self.opts = $.extend({}, $.fn.myPlugin.defaults, opts);
 
  this.getTrue = function() {
    return true;
  };
 
  var getFalse = function() {
    return false;
  };
 
  return this.each( function() {
     var something = self.opts.something;
     console.log(something);
     console.log(self.getTrue()); // returns true;
     console.log(getFalse()); // returns false;
  }
};

notice the two different ways of creating functions. One is able to be accessed from any reference to the plugin and one is scoped to be hidden.

1 2	$('BODY').myPlugin().getTrue(); // returns true; $('BODY').myPlugin().getFalse(); // fails

Because getFalse is scoped to only be available inside of the function you cannot call it from any where other than in your plugin.

From another plugin you could then access getTrue() but not getFalse.

Hope this helps.

Comment on Expanding the jQuery Plugin Development Pattern by Mike

Mike — Fri, 06 Nov 2009 17:00:22 +0000

Thanks JC. This would solve my problem for variables. But is there anyway that I can trigger a function inside return this.each( function () {. Basically I have a plugin working on a DOM element but I want to be able to change its behavior based on a behavior of another DOM variable (from within another jquery plugin). I am wondering if I have to update my variables and reset this plugin or can I somehow call the functions within plugin from another plugin.

Comment on Expanding the jQuery Plugin Development Pattern by jcfant

jcfant — Fri, 06 Nov 2009 15:50:35 +0000

Mike, I think the problem lies in how “this” is handled in Javascript.
inside of the following:

1
2
3

return this.each( function() {
    //doing bunch of stuff with $(this)
});

$(this) would refer to the DOM element that the function is called on.

You could access any of the variables inside of $.fn.myPlugin by calling them directly:

   return this.each( function() {
     console.log(opts); // will dump the contents of opts to firebug
    //doing bunch of stuff with $(this)
   });

alternatively you may want setup a variable that you can access from within the each that has the information you need.

 $.fn.myPlugin = function(opts) {
      var self = this;
      self.opts = $.extend({}, $.fn.myPlugin.defaults, opts);
      return this.each( function() {
           // doing bunch of stuff with $(this);
           // if you now need access to opts you can all it like
           var something = self.opts.something;
           console.log(something); // would dump the information to firebug that was set in opts out side of the this.each
      });

Hope that helps.

Comment on Expanding the jQuery Plugin Development Pattern by Mike

Mike — Fri, 06 Nov 2009 14:26:24 +0000

I am a little confused. I am trying to get access to the variables and functions within this.each( function() { but even after reading all this and trying everything still have a lot of difficulty…
Any feedback will be greatly appreciated.

(function($){

//bunch of initialization variables and functions

$.fn.myPlugin = function(opts) {
opts = $.extend({}, $.fn.myPlugin.defaults, opts);
return this.each( function() {

//doing bunch of stuff with $(this)

});
};
$.fn.myPlugin.defaults = {

// bunch of default options

};
})(jQuery);

});