Magdy
Magdy

Reputation: 355

Add new item to selectizInput using js

I'm trying to add a new option to selectizeInput through easybutton located in leaflet.

What i get is an undefined option

Here is an example:

library(shiny)
library(leaflet)

shinyApp(
ui <- fluidPage(
  selectizeInput("countries", "Country :", choices = c("Worldwide") ),
  leafletOutput("countryMap",height="500px")
),

server <- function(input, output, session){

output$countryMap <- renderLeaflet({
  leaflet() %>%
  addEasyButton(easyButton(icon = "fa-check", id = "doneMap", position = "topright", title = "Finish",
                               onClick = JS("function(btn, map){ 
                                              var $select = $('#countries').selectize();
                                              var selectize = $select[0].selectize;
                                              selectize.addOption({ value: 'selectedRegion', text: 'Selected Region' });
                                              selectize.addItem('selectedRegion');
                                            }
                                            "))) %>%
    addProviderTiles(providers$Esri.WorldStreetMap)
   
 })
})

Upvotes: 0

Views: 102

Answers (1)

GGamba
GGamba

Reputation: 13680

The only problem id that data in addOption(data) is an object that needs value and label keys, not value and text:

...,
onClick = JS("function(btn, map){ 
                  var $select = $('#countries').selectize();
                  var selectize = $select[0].selectize;
                  selectize.addOption({value: 'selectedRegion', label: 'Selected Region'});
                  selectize.addItem('selectedRegion');
              }")

Upvotes: 1

Related Questions