Event trigger not firing when evaluating a select option

[james-mke]

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

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

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.

[Pradeep_Kumar_Srivastav]

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.
"

 

[bjoern__koth]

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

[james-mke]

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

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.

[bjoern__koth]

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))
}

[james-mke]

Nice! We will give that a try.

[bjoern__koth · Accepted solution]

just tested, this should work hopefully for you as well

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);
}