Fire an onshow event on all divs with a particular text in their IDs

[sujani_koya]

Hi, I want to fire an event whenever an error message shows up.  Errors appear like alerts for a few seconds.  They occupy divs with varying names and ids but with the consistent presence of the text "error" in their id.   Some have the id 'div-error message' or some have the id 'login. error' etc. So I took an onclick Handler extension and in the jQuery Selector I enter  *[id*="error"] to catch the 'show's of all divs with the text 'error' in their div id.  It is not working.   Can I get any suggestion to make it work please?  Thanks a lot.  Right now this console message is not showing up.  Once it does, I'll set up a Google tracking event in its place with the link option instead of 'custom'

[mitchellt]

Hello @sujani_koya - A screenshot, sample URL or code sample might help us begin to attempt to answer your question.

[sujani_koya]

Added screenshot. Will greatly appreciate any help!

[GavinAttard]

Hi

Your selector does not appear correct to me. 

Can you put a screenshot with some examples of the elements you want to select?

[sujani_koya]

Hi Gavin,

There are 2 error alerts with the following jQuery Selectors -
1) #firstname-error.mage-error
2) div.error.message-error.message div

How can I set a jQuery Selector common to both of them in the extension?

Thanks a lot!
Sujani

[dragooon]

Hi @sujani_koya ,

     You may need to setup two different extension for this id and class, then only you may be able to achieve the output.

Because afterShow is a custom event getting triggered by tealium. 

The code for this custom event checks whether the particular selector is visible for every 250ms. 

If yes tealium is setting up the flag and then firing a custom event. The flag setup is for deduplication. 

Hence if you give multiple selector or give a common selector, the after show event will fire only for the first occurance.  

utag.jdh = function(h, i, j, k) {
h = utag.jdhc.length;
if (h == 0)
window.clearInterval(utag.jdhi);
else {
for (i = 0; i < h; i++) {
j = utag.jdhc[i];
k = jQuery(j.i).is(":visible") ? 1 : 0; --> checking the visiblity of the selector
if (k != j.s) {
if (j.e == (j.s = k)) --> setting up the flag 'j.s'
jQuery(j.i).trigger(j.e ? "afterShow" : "afterHide") --> customevent
}
}
}
};

utag.jdhi = window.setInterval(utag.jdh, 250); --> For looping if the selector is not visible

Thanks,

VJ

[sujani_koya]

Thank you VJ.  In my case there will be only one div visible at a time so I don't mind a common selector.  Will prefer one in fact.  There are divs throughout the site with the text 'error' in them and the rest of the id varying

[sujani_koya]

@GavinAttard  can you come up with a common selector for these 2 divs?  Thanks a lot! _/|\_

[GavinAttard]

Hi @sujani_koya 

in jquery you can add multiple selectors formatted as follows

$("Selector1, Selector2, SelectorN")

so, i woudl try inputting as follows in the jquery selector box, 

#firstname-error.mage-error, div.error.message-error.message div

haven't had a chance to try it myself yet, but give it a go.