2

I need to have a JavaScript event that is triggered when the parent tab of my field type instance is shown on the entry form. So if the field is on the second tab, the div is hidden on instantiation. The div is obviously shown once the parent tab is clicked. I need this event to reset the map in my field type. If a map is instantiated with a hidden div, it must be redrawn before it can be displayed properly. So when the div displays (after the parent tab click) I need to trigger the method to redraw the map. Is there a JavaScript event available for this and if so, how would I use it?

If no such event exists and if one can't be added, I guess the only other way would be to try to traverse the DOM and add click events to the respective tabs. This feels kind of like a hack though and would break if the DOM changes.

1

There is not, however if you have a Javascript class that extends Garnish.Base, you will be able to listen for a custom resize event on your container div using Garnish.Base::addListener(), which will trigger when the element first gets a height.

window.MyClass = Garnish.Base.extend(
{
    container: null,

    init: function(container)
    {
        this.$container = $(container);

        // Is the container already visible?
        if (this.$container.height())
        {
            this.doStuff();
        }
        else
        {
            // Hold off until it is
            this.addListener(this.$container, 'resize', function(ev)
            {
                this.removeListener(this.$container, 'resize');
                this.doStuff();
            }
        }
    },

    doStuff: function()
    {
        // this.$container is visible now
        // ...
    }
});

Off-topic, but worth noting: one of the benefits of using Garnish.Base::addListener() rather than jQuery.on() or jQuery.bind() is that it will maintain the scope for you in the callback function. So you don’t need to worry about doing that yourself with jQuery.proxy(), e.g.

this.$container.bind('click', $.proxy(function(ev)
{
    // `this` would refer to the container element here, if it weren’t for $.proxy().
}, this);
|improve this answer|||||
  • I finally got around to implementing this. This logic worked out great. I had to make a couple changes to get it working, but the overall logic was sound. Before I had a class that would bootstrap all the fieldtype JS, but I changed that class so that it extended Garnish.Base and got it all working great as far as I can tell. – Justin Kimbrell Sep 30 '14 at 4:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.