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.
Solved! Go to Solution.
Topics help categorize Community content and increase your ability to discover relevant content.
Views
Replies
Total Likes
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);
}
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.
"
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
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.
Views
Replies
Total Likes
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))
}
Nice! We will give that a try.
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);
}
Views
Likes
Replies
Views
Likes
Replies
Views
Likes
Replies
Views
Like
Replies