Element Exists and Text Changes | Community
Skip to main content
jeffsabre
jeffsabre
Level 2
June 20, 2017
Solved

Element Exists and Text Changes

  • June 20, 2017
  • 9 replies
  • 3583 views

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.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by ParitMittal

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

9 replies

jantzen_b
Adobe Employee
jantzen_bAdobe Employee
Adobe Employee
June 20, 2017

Hi,

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

Thanks,
Jantzen

jeffsabre
jeffsabreAuthor
Level 2
June 21, 2017

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
Adobe Employee
jantzen_bAdobe Employee
Adobe Employee
June 21, 2017

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
jeffsabreAuthor
Level 2
June 21, 2017

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
Adobe Employee
jantzen_bAdobe Employee
Adobe Employee
June 21, 2017

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

ParitMittal
ParitMittalAccepted solution
Level 10
June 27, 2017

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
jeffsabreAuthor
Level 2
June 27, 2017

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
Adobe Employee
jantzen_bAdobe Employee
Adobe Employee
July 21, 2017

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
jeffsabreAuthor
Level 2
July 21, 2017

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

Thnx

Jeff

Site Optimization, Analytics and Reporting Principal

Terms & ConditionsAccessibility statement

Loading footer...