CODEWITHSUNDEEP
javascriptrshinyshinyjsshiny-reactivity
Manos C
Manos C

Reputation: 333

Shiny R: Change border color of selectInput

I am creating a rather reactive app that has a few numericInput variables and some selectInput variables.

As the variables are quite many and they are used to estimate interventions, I am introducing colours to denote those variables that are different from the default. I have already implemented this with the help of @BigDataScientist in this question. A MWE is presented:

library(shiny)
library(shinyjs)
ui<-shinyUI(
  fluidPage(
    useShinyjs(),
    numericInput("V1", "MyV1" , value = 5, min = 0, max= 100, step = 0.01),
    numericInput("V2", "MyV2" , value = 23, min = 0, max= 100, step = 0.01),
    selectInput("V3" , "MyV3" , selected = 1 , choices=c("Yes" = 1,"No" = 0))
  )
)
#
server<-shinyServer(function(input, output) {
  observe({
    if(!is.na(input$V1) & input$V1 != 5){color <- "solid #9999CC"}else{color <- ""}                     
    runjs(paste0("document.getElementById('V1').style.border ='", color ,"'"))
    if(!is.na(input$V2) & input$V2 != 23){color <- "solid #9999CC"}else{color <- ""}                     
    runjs(paste0("document.getElementById('V2').style.border ='", color ,"'"))
    if(!is.na(input$V3) & input$V3 != 1){color <- "solid #9999CC"}else{color <- ""}                     
    runjs(paste0("document.getElementById('V3').style.borderColor ='", color ,"'"))
    })
  })
#
shinyApp(ui,server)

As you can see in the following figure, my code works for the numeric values, however it does not for the select input variable (on an interactive environment at least).

My example

Now it is not that the condition does not work, it is evaluated and the runjs runs.

Additionally, as you can see in the following js snippet, the js command is just fine. There is probably the way to make it reactive (without a submit button exactly as the numericInput) that I miss. 

<!DOCTYPE html>
<html>
<body>



<select id="mySelect">
  <option>Apple</option>
  <option>Orange</option>
  <option>Pineapple</option>
  <option>Banana</option>
</select>

<p>Click the button to change the style of the H1 element.</p>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
    document.getElementById("mySelect").style.borderColor = "red";
}
</script>

</body>
</html>

Do you have any suggestions?

Upvotes: 2

Views: 1464

Answers (1)

St&#233;phane Laurent
St&#233;phane Laurent

Reputation: 84519

You don't need selectize.js so you can do:

selectInput("V3" , "MyV3" , selected = 1 , choices=c("Yes" = 1,"No" = 0), 
            selectize = FALSE)

This gives an "ordinary" select input.

Next I've tried your code with color <- "red" and this works.

Upvotes: 1

Related Questions