Dynamically setting default in crosstalk filter with Javascript works for one variable, but not the other

In your "working as expected" 2015 and Jan are quoted:

<script> function filter_default(){ document.getElementById("year_filter").getElementsByClassName("selectized")[0].selectize.setValue("2015",false) document.getElementById("month_filter").getElementsByClassName("selectized")[0].selectize.setValue("Jan",false) } $(document).ready(filter_default); </script>

they way you pass variables to JS, 2015 and Jan are not quoted. 2015 works since it's an integer, but Jan is an undefined variable.

> tags$script(HTML(' + function filter_default(){ + document.getElementById("year_filter").getElementsByClassName("selectized")[0].selectize.setValue(',default_year,',false) + document.getElementById("month_filter").getElementsByClassName("selectized")[0].selectize.setValue(',default_month,',false) + } + $(document).ready(filter_default); + ')) <script> function filter_default(){ document.getElementById("year_filter").getElementsByClassName("selectized")[0].selectize.setValue( 2015 ,false) document.getElementById("month_filter").getElementsByClassName("selectized")[0].selectize.setValue( Jan ,false) } $(document).ready(filter_default); </script>

So possible fixes could be sprintf

js <- tags$script(HTML(sprintf(' function filter_default(){ document.getElementById("year_filter").getElementsByClassName("selectized")[0].selectize.setValue("%s",false) document.getElementById("month_filter").getElementsByClassName("selectized")[0].selectize.setValue("%s",false) } $(document).ready(filter_default); ', default_year, default_month)))

paste0

js_paste0 <- tags$script(HTML(paste0(' function filter_default(){ document.getElementById("year_filter").getElementsByClassName("selectized")[0].selectize.setValue("',default_year,'",false) document.getElementById("month_filter").getElementsByClassName("selectized")[0].selectize.setValue(',default_month,'",false) } $(document).ready(filter_default); ')))

glue

js_glue <- tags$script(HTML(glue::glue(' function filter_default(){{ document.getElementById("year_filter").getElementsByClassName("selectized")[0].selectize.setValue("{default_year}",false) document.getElementById("month_filter").getElementsByClassName("selectized")[0].selectize.setValue("{default_month}",false) }} $(document).ready(filter_default); ')))

---

Full Reprex

library(leaflet) library(crosstalk) library(geosphere) library(htmltools) library(bslib) set.seed(42) dat<-data.frame(year=c(rep(2015,15),rep(2016,15),rep(2017,15)), month=factor(rep(c('Jan','Feb','Mar'),3), levels=c('Jan','Feb','Mar')), lon=randomCoordinates(n = 45)[,1], lat=randomCoordinates(n = 45)[,2]) sd <- SharedData$new(dat) dropdown_filter <- filter_select( id = "year_filter", label = "", sharedData = sd, group = ~year, multiple=F ) dropdown_filter2 <- filter_select( id = "month_filter", label = "", sharedData = sd, group = ~month, multiple=F ) map<-leaflet() %>% addTiles() %>% addCircleMarkers( data = sd, ) default_year <- min(unique(dat$year), na.rm=T) default_month <- as.character(dat$month[1]) js <- tags$script(HTML(sprintf(' function filter_default(){ document.getElementById("year_filter").getElementsByClassName("selectized")[0].selectize.setValue("%s",false) document.getElementById("month_filter").getElementsByClassName("selectized")[0].selectize.setValue("%s",false) } $(document).ready(filter_default); ', default_year, default_month))) browsable(tagList(js, bscols(dropdown_filter,dropdown_filter2), map ))

giving