Element Exists and Text Changes

[jeffsabre]

I thought I could build two different event based rules for the same element with a secondary condition being the differentiation between the two so they both would fire. One rule for  div.dxp-modal-window-content>h2 where textContent matches 'expiration warning' and the second rule being div.dxp-modal-window-content>h2 where textContent matches 'session expired'. But its not working only, the first rule fires. I am assuming this does not work because the div.dxp-modal-window-content>h2 is added to the DOM once and its merely the textContent that is changing.

Anyway to build a CSS rule based on the text changing after an element is added to the DOM? I know I could use a Direct Call rule but we only have releases 4 times per year and I don't want to have to wait that long.

[jantzen_b]

Hi,

Which condition are you using in your event based rules currently?

Thanks,
Jantzen

[jeffsabre]

Attached screen shots

Rule 1 Element exists – div.dxp-modal-window-content>h2 and textContent contains session is about to expire

Rule 2 Element exists – div.dxp-modal-window-content>h2 and textContent contains Start over

Thnx

Jeff

Site Optimization, Analytics and Reporting Principal

[jantzen_b]

Thanks for providing the additional information.

The second rule would need to fire using a different event handler. I believe the Element exists handler is only fired once. You could try using the Enters viewport or you could always write your own if the built-in handlers aren't meeting your needs.

Thanks,
Jantzen

[jeffsabre]

Thank you but unfortunately the modal is launched with all the elements and for Rule 2 the only thing changing is the textContent. Not sure it’s possible to write an event handler for textContent attribute

Thnx

Jeff

Site Optimization, Analytics and Reporting Principal

[jantzen_b]

ParitMittal​ - Do you have any ideas that might help here?

[ParitMittal · Accepted solution]

Hi Jeff,

I am not very sure if this will work but an alternative way of doing this is to create a Data Element of Type CSS Selector. In the CSS Selector Chain, point to your element    div.dxp-modal-window-content>h2, and for get the value of, select "text".

Next, in the Event Based Rule, choose Event Type of dataelementchanged, and then select your Data Element in the dropdown and then in criteria for the rule Please select criteria as  'Data Element value'  and then select your data element and type the value of it as 'session expired' . Hence the rule will only trigger if the data element mapped to div.dxp-modal-window-content>h2 has value 'session expired'.

Also, Can you please provide the URL of test page , so that we can test it from our end ?

Regards

Parit Mittal

[jeffsabre]

That sounds like a very plausible solution Parit and I hadn’t even thought about using a CSS Data Element. I will give this a try and let you know. Here is the production site. And the pages we host are the shopping and booking pages and that’s where you will see the session timeout warning and expiration; https://dx.flights.kulula.com/dx/MNDX/#/home

Thnx

Jeff

Site Optimization, Analytics and Reporting Principal

[jantzen_b]

Hi Jeff,

Any updates here? Did Parit's suggestion solve the issue? If so, I'd like to get his answer marked as correct in case others face a similar issue.

Thanks,
Jantzen

[jeffsabre]

My apologies I thought I had indicated the suggestion worked to use a CSS data element.

Thnx

Jeff

Site Optimization, Analytics and Reporting Principal