Aftershow is not Run Code after a modal is shown

[mvenkatesan]

Hello Team,

We are currently working on tracking Modals globally using data attributes method. Adding two (2) data atttibutes
1. data-modal - contains modal name

2. data-pload - contais all the UDO variables required.

Used JQUERY aftershow to trigger the utag link call but no luck. 

jQuery(document.body).on('afterShow', '[data-modal]', function(e) {
        console.log("After Show")
        if (jQuery('[data-modal]').is(':visible')) {
            console.log("Modal Shown")
			//utag.link call
        }
    )
}

Have you guys tried something like this before. Can you please let me know what I am missing here.

Thanks

[GavinAttard]

Hi

I had similar issues with identifying when elements inside a modal are visible, whcih would trigger a utag.link. 

what appeared to be happening is that these elements may not have been available on dom ready.

in the end i used setinterval to get the if statements looping 

//set overall time for checking
var maxTime = 1000, // 1 second
    startTime = Date.now();

var interval = setInterval(function () {
        //check if element is visisble
        if ($('the-element').is(':visible')) {
            // visible - trigger link event
            clearInterval(interval);
        } else {
            // still hidden
            if (Date.now() - startTime > maxTime) {
                // hidden even after 'maxTime'. stop checking.
                clearInterval(interval);
            }
        }
    },
    100 // 0.1 second (wait time between checks)
);

not sure if it will resolve your issue, but, thought i'd throw it out there... 

[mvenkatesan]

Thank you @GavinAttard for your response. Will try this approach.

Thanks