Method ignoring the callback function in a jQuery plugin

Question

Method ignoring the callback function in a jQuery plugin

Navigation

#1 by (1 votes)

3

I'm developing a plugin in jQuery and the problem or difficulty is:

I created the methods init , show and hide ;

(function( $ )
    $.fn.tooltip = function(method, onClick, onBefore, onAfter) {

        var default = {
            'onClick' : function() {},
            'onBefore': function() {},
            'onAfter' : function() {},
        };

        var settings = $.extend({}, default, options);

        var methods = {
           init : function(options) {
              return this.each(function(){
                  var $this = $(this);
                  methods.show.apply($this);
                  settings.onClick.call($this);
              });
           },
           show : function() {
              return this.each(function(){
                  var $this = $(this);
                  settings.onBefore.call($this);
                  //Aqui vem a manipulação de classes...
                  .
                  .
                  .
                  .
                  .
                  methods.close.apply($this);
              });
           },
           hide : function() {
              return this.each(function(){
                  var $this = $(this);
                  settings.onAfter.call($this);
                  //Aqui vem a manipulação de classes...
              });
           }
        };

        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' );
        }    
    };
})( jQuery );

When I call through the init method everything works fine, but when I call through the hide method $('#test').myPlugin('hide'); the hide method is executed, but the callback function settings.onAfter($this); is ignored.

Calling method init

$('#test').myPlugin({
    onClick: function(){
        $('.button').myPlugin('hide');
    },
    onBefore: function(){
        $('body').addClass('onBefore');
    },
    onAfter: function(){
        $('body').addClass('onAfter');
    }
});

When I call the init method it calls show , this method does everything that needs to be done (class handling) and after all it calls the hide method. The hide does everything that needs to be done as well and then calls the onAfter callback function, perfect!

But when I call the method hide through the callback function onClick , it executes the method correctly, it only ignores the callback onAfter

javascript jquery front-end plugin

asked by anonymous 20.10.2015 / 19:28

1 answer

Query doubt (grouping) How to convert HTML code to a PDF file in java?

score 1 · Accepted Answer

I made some adjustments to your code. Give this example a spin and look at the browser console.

   $(function(){
   $("#ipTeste").tooltip('hide');
   //$("#ipTeste").tooltip('show');
   //$("#ipTeste").tooltip('init');
});

(function($){
    $.fn.tooltip = function(method) {
        
        var defaultV = {
            'onClick' : function(el) {
                console.log("onClick...");
            },
            'onBefore': function(el) {
                console.log("onBefore...");
            },
            'onAfter' : function(el) {
                console.log("onAfter...");
                defaultV.onBefore();
                defaultV.onClick();
                
                $(el).tooltip('show');
                $(el).tooltip('init');
            }
        };
        
        var settings = $.extend({}, defaultV);
        
        var methods = {
            init : function(options) {
                return this.each(function(){
                    console.log("INIT...");
                    var $this = $(this);
                    settings.onClick.call({}, $this);
                    //Aqui vem a manipulação de classes...
                });
            },
            show : function() {
                return this.each(function(){
                    console.log("SHOW...");
                    var $this = $(this);
                    settings.onBefore.call({}, $this);
                    //Aqui vem a manipulação de classes...
                });
            },
            hide : function() {
                return this.each(function(){
                    console.log("HIDE...");
                    var $this = $(this);
                    settings.onAfter.call({}, $this);
                    //Aqui vem a manipulação de classes...
                });
            }
        };
        
        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' );
        }   
    };
})( jQuery );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><inputtype="text" id="ipTeste"/>