Expand my Community achievements bar.

SOLVED

Event trigger not firing when evaluating a select option

Avatar

Level 3

We are trying to create a rule that is attempting to capture the selected option value when a dropdown is engaged with. 

jamesmke_0-1722025558361.png

When evaluating the css selector in a browser console it returns the expected result.

jamesmke_1-1722025747555.png

Does anyone have insight about either the either the event type, the css selector used or maybe what we are trying to do is not possible in this way.

Topics

Topics help categorize Community content and increase your ability to discover relevant content.

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

just tested, this should work hopefully for you as well

bjoern__koth_0-1722617147144.png

and custom code

 

const dropdown = event.target;
if (dropdown) {
    const selectedIndex = dropdown.selectedIndex;
    const value = dropdown.options[selectedIndex].value;
    _satellite.logger.debug(">>> selected dropdown value on change", value);
}

 

Cheers from Switzerland!

View solution in original post

6 Replies

Avatar

Community Advisor

Hi @james-mke , Is the dropdown is part of AEM form?

1- Can you ensure that the click event type is appropriate for the element. For instance, if you are trying to detect a change in the selection for a dropdown, you might want to use the change event instead of click.

 

2- Check the "Advanced Options" section to ensure that there are no additional conditions or restrictions that could prevent the event from firing.

3- Enable debugging in Adobe Launch to see if the rule is being evaluated and why it might not be firing.  "satellite.setDebug(true)"

Let me know if it helps.
"

 

Avatar

Community Advisor

Hi @james-mke 

I assume "click" is not really what you are looking for and would rather go with a generic that "change" event listener to make sure you are also capturing elements which have been added through dynamically loaded content.

 

Something like this (sorry posting from my phone), as custom code in a library loaded rule.

 

document.addEventListener("change", (event) => {

  const dropdown = event?.target?.closest("select");

  if (dropdown) {
    _satellite.logger.debug("dropdown changed", dropdown);
  }
});

 

or by using a custom event rule

Cheers from Switzerland!

Avatar

Level 3

Thank you @Pradeep_Kumar_Srivastav and @bjoern__koth for your responses. Based on those we now have this working to activate the data capture.

jamesmke_0-1722510528109.png

Now our next step is to figure out how to capture the specific option value selected when the change event happens.

So far, we are getting all of the values in the list or none of the values in the list. 
We also learned that using the CSS selector in the above configuration results in the rule not activating: #dropdown-1 > option

 

We will keep playing with it and see if we can get it to work.

Avatar

Community Advisor

Hi @james-mke 

 

great, didn't think of the custom event at all xD

one way or another, the code in the function below should also work in your rule's Custom Code action.

 

You should still have the event object in your callback with a .target attribute will be the DOM element that caused the event.

 

// single selected values
_satellite.logger.debug(">>> onchange callback event", event);
const dropdown = event?.target?.closest("select");
if (dropdown) {
    const selectedIndex = dropdown.selectedIndex;
    const value = dropdown.options[selectedIndex].value;
    console.log(">>> selected option value (single option)", value);
}

// if you have multi-selection allowed
if (dropdown) {
    Array.from(dropdown.selectedOptions).forEach(option => console.log(">>> selected option value (multi-select option)", option.value))
}

 

Cheers from Switzerland!

Avatar

Correct answer by
Community Advisor

just tested, this should work hopefully for you as well

bjoern__koth_0-1722617147144.png

and custom code

 

const dropdown = event.target;
if (dropdown) {
    const selectedIndex = dropdown.selectedIndex;
    const value = dropdown.options[selectedIndex].value;
    _satellite.logger.debug(">>> selected dropdown value on change", value);
}

 

Cheers from Switzerland!