UI Page - dynamically filter with dropdown

[alexcharleswort]

Hi all,

I have a question on a ui page. I feel like I have mostly figured this out. Basically, I have a table "u_weekly_updates". When someone navigates to the ui page, I want them to be able to select a date from a dropdown. I don't think type="date" works in IE yet, and then there's issues with the formatting. So, to get around that, I will just be populating a separate table (u_dates) with the possible dates.

What I want to have happen is when they select a date from the drop down the list is immediately filtered by the value of that date. I have this mostly working, but only if I hard code the dates in the HTML Script.

This is the code I have so far, any ideas on how to push table values into the select box instead of hard-coding??

HTML:

<select id="categorySelect">
    <option value="">-- None --</option>
    <option value="02-28-2018">-- 02-28-2018 --</option>      
   </select>

Client Script:

jQuery('#categorySelect').change(function(){
  var input, filter, table, tr, td, i;
  //input = document.getElementById("myInput");
 input = document.getElementById("categorySelect");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }      
  }
});

[alexcharleswort]

On the other side of the fence... I can do this and populate a reference on the ui page...

<g:ui_reference id="categorySelect2" name="number" table="u_dates" value="${u_date.getDisplayValue()}"/>

but I can't get it to interact with the client script...

//function myFunction() {
jQuery('#categorySelect2').change(function(){
  var input, filter, table, tr, td, i;
  //input = document.getElementById("myInput");
 input = document.getElementById("categorySelect2");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }      
  }
});

[eborsh]

I have a related issue. Were you ever able to figure this out?