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.

score 9 · Accepted Answer · answered Feb 23 '12 at 22:13

9

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

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(...).
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.

answered Feb 23 '12 at 22:13

mkmurray

2,434
3
21
22

2

`This comment was a rejected EDIT:` There is a bug in the above link. A working version can be found at http://jsfiddle.net/GDqNx/1/ – Jeremy Thompson Dec 21 '12 at 03:26
I do see the difference in what was changed, but what is the bug? – mkmurray Feb 27 '13 at 23:03
I'm not sure what the bug is. Some `anon` user tried to edit your answer, I knew the edit would be rejected but was clued in enough to save it as a comment. – Jeremy Thompson Feb 27 '13 at 23:45
This still does not work if the parent element that is hidden instead of the element itself. Here is jsFiddle: http://jsfiddle.net/drv5w/121/ – Rosdi Kasim Apr 28 '14 at 10:14
This answer didn't work for me, but the one in the rejected edit did. – Andrew Apr 17 '15 at 18:50
Not able to get this to work on a visibility triggered by ajax response. – JackTheKnife Oct 07 '16 at 14:19

score 3 · Answer 2 · edited May 23 '17 at 11:45

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".

Looks like this solution is faster in comparison to @mkmurray 'beforeShow' event. In my case this approach does not cause visible delay of showing an element. So I choose this answer. — Anton Lyhin, Sep 13 '17 at 21:15

Diode · Answer 3 · 2012-02-23T09:39:16.530

I haven't tested anything, but sharing a few things I know

show has an optional second parameter - easing. jQuery automatically detects this, but for a perfect a solution you have to consider this.
```
_oldShow.apply(obj, [speed, null, newCallback]); 
```
A callback makes sense only when there is a delay, that means value for speed. I hope your afterShow event will be triggered if there is a delay. If there is no delay you can trigger it after invoking _oldShow, like this
```
_oldShow.apply(obj, [speed, null, newCallback]); 
if(!speed){
  obj.trigger('afterShow');
}
```

EDIT:

I tired a few things and frpm what I learned I would suggest you to create a new show function instead of overriding.

jQuery.fn.extend({

    show2:function( speed, easing, callback ) {
        this.trigger('beforeShow');
        this.show(speed, easing, function(){
            $(this).trigger('afterShow');
            if ($.isFunction(callback)) {
                callback.apply(this);
            }
        });
        if(!speed){
            this.trigger('afterShow');            
        }          
    }


});

demo: http://jsfiddle.net/9F8ea/2/

I tried including the easing parameter and nothing changed. I also tried having an oldCallback populated and then didn't help either. As for your last suggestion, I cannot make a show2 as the call to show() is in a 3rd party javascript. I want to override the default show() in jQuery. — mkmurray, Feb 23 '12 at 17:27

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

3 Answers3

Linked