Solved

Tracking SELECT indexes

  • 20 January 2023
  • 6 replies
  • 76 views
P
Userlevel 1
Badge +1

I’m using a basic SELECT element, and tracking it’s onChange events with a Snapshot.  However, I never get the index returned, just a -1.

The Heap docs provide this valuable tidbit of info… (and suspect this is the culprit).

var selector = 'li.h-full' // Replace this CSS! Selector must target all of the elements in the list

 

But if my HTML code is simply…

<select name=”fieldA” class=”selectStyles”>

  <option value=”-1”>- Select -</option>

  <option value=”0”>Apples</option>

  <option value=”1”>Oranges</option>

  <option value=”2”>Grapes</option>

</select>

 

What selector is Heap hoping for?  Currently, my snapshot contains this code…

(function() {

    var selector = 'option'

    var selected_element = event.target.closest(selector)

    var all_elements = document.querySelectorAll(selector)

    return Array.prototype.indexOf.call(all_elements, selected_element);

})()

 

Thanks for any assistance!!!

icon

Best answer by dlad 21 January 2023, 05:41

View original

6 replies

dlad
Rank
Userlevel 4
Badge +2

Hi PBrady!

For the benefit of anyone viewing this, indexOf(...) returning -1 means the search element (selected_element in this case) was not found in the node list (all_elements in this case). We should examine the value of all_elements and selected_element to see why selected_element is not in any index position of all_elements. In heap, ‘event.target’ represents the element clicked, whichever element that may be for any given event. It’s possible that the specific element that was clicked does not have an ‘option’ element in its direct ancestor hierarchy (how ‘closest()’ works). In this case, you’d get -1 as the overall result.

Drop a link to your page if you can and I’ll be happy to take a look! Cheers

P
Userlevel 1
Badge +1

Thank you dlad!

This is the page that I’m talking about… https://bit.ly/3Xy41xb   The first SELECT is ‘select[name=”projectStart”]’

I can get close when I replace the Heap Snapshot code entirely with my code (below)…   But I’ve yet to see the LAST item in the selector show up (even though similar code works in my Dev Console).  Of course, it’s entirely possible that I just have to wait longer for the data to show up.  Hard to tell.

 

(function() {

  var selector = 'div.px-3.pb-1.rounded-b.bg-gray-100'; // FORM parent el

  var seletion_value = event.target.options[event.target.options.selectedIndex].value

  return "V2: " + seletion_value

})()

 

 

 

 

dlad
Rank
Userlevel 4
Badge +2

pbrady -- this appears to work. I replaced `event.target` with `$0` since $0 will individually represent the selected element in the DOM. This allows me to manually simulate a user clicking on whichever element I have selected. That is to say, when you have the event.target version of the snapshot, it will only work on an event whose definition is click on: option. You can make the selector more detailed than that, but it will only work if the user clicks on an option element. See screenshot. “2” was when I highlighted the option above the currently selected option. “3” is from the element shown selected in gray. I hope this helps!

 

P
Userlevel 1
Badge +1

That’s great.  Thank you for your help, dlad!

P
Userlevel 1
Badge +1

I was also able to get the SELECT Snapshot properties to work by using the “to text in element” variation.  This is probably easier than the JavaScript way, as it turns out.   

 

Maybe this will save somebody some time…   ~Paul

 

 

 

 

 

P
Userlevel 1
Badge +1

FYI -- This captures the dropdown string, not the Option value or index.

Reply


Terms & ConditionsCookie settings