Attempting to trigger before & after events around jQuery show()

Question

I'm trying to get a piece of our JavaScript run after some 3rd party code makes a modal dialog appear. I saw a pretty neat idea of hijacking the jQuery show function, but unfortunately it is not working. I'm guessing this idea used to work on an older version of jQuery back in 2009, but not now on the latest version. Here is a jsFiddle with the implementation and a sample:

http://jsfiddle.net/mkmurray/drv5w/2/

As you can see by running the sample, it will alert the 'beforeShow' event, but not the 'afterShow event' and with some debugging I can see that it is not calling the 'newCallback' function entirely.

Thank you in advance with any help you can provide.

Answer 1

Looks like I was able to work through a solution. It involved a few factors going wrong with the original:

1. Since the original writing of the code I saw, jQuery added another optional parameter named easing. This really messed with how I was delegating to the original show method in jQuery by calling _oldShow.apply(...).
2. After I fixed that, I found that sometimes the show method calls a series of other methods that sometimes recursively call show again. I needed a way to not have my implementation intercept those recursive calls; I found that I could rely on if there was a selector property or not.

A working implementation can be found here at this jsFiddle:

http://jsfiddle.net/mkmurray/drv5w/27/

This implementation is pretty dependent on jQuery not changing the method signature of the show method though. So you pretty much have to decide if you want to modify your 3rd party jQuery plugins instead of doing this. Either way, if you want to get latest of the 3rd party plugin or the latest jQuery, some new change could break your implementation. So this solution is not necessarily better or worse than modifying your third party plugins.

Answer 2

I found another solution to this over here, with a slight tweak of my own.

(function($){
    $.each(['show','hide'],function(i,ev){
        var el = $.fn[ev];              
        $.fn[ev] = function(){
            this.trigger(ev);
            return el.apply(this,arguments);
        };
    });                  
})(jQuery);

It doesn't offer the before/after events of other examples but it could certainly be elaborated on. It's working for me so far and hope it continues to do so--it's a nice little approach that can easily be expanded to other jQuery functions, including the various alternatives to show.

** Note this also fires an event for "hide".