Cannot run JavaScript code when Shiny `renderUI` is used

Question

I am trying to apply a JS script (a 'Select all' box) to a dynamically rendered UI, but the following does not work:

library(shinyjs)

ui <- fluidPage(
    useShinyjs(),
    
    uiOutput("checkbox_ui")
)

server <- function(input, output, session) {
    
    output$checkbox_ui <- renderUI({
        checkboxGroupInput(inputId = "myCheckbox",
                           label = NULL,
                           choices = c("All", "A", "B"))
    })
    
    runjs(HTML("
        $(\"#myCheckbox input[value='All']\").click(function(e) {
            $(\"#myCheckbox input[type='checkbox']\").prop('checked', $(e.target).prop(\"checked\"));
        });
    "))
}

shinyApp(ui, server)

However, when I skip using renderUI, the JS script is ran:

library(shinyjs)

ui <- fluidPage(
    useShinyjs(),
    
    checkboxGroupInput(inputId = "myCheckbox",
                       label = NULL,
                       choices = c("All", "A", "B"))
)

server <- function(input, output, session) {
    
    runjs(HTML("
        $(\"#myCheckbox input[value='All']\").click(function(e) {
            $(\"#myCheckbox input[type='checkbox']\").prop('checked', $(e.target).prop(\"checked\"));
        });
    "))
}

shinyApp(ui, server)

Would someone know a workaround?

Stéphane Laurent · Accepted Answer · 2021-07-30 20:32:35Z

4

That's because the checkbox is not rendered yet when runjs is executed.

I would try:

runjs(HTML("setTimeout(function(){
        $(\"#myCheckbox input[value='All']\").click(function(e) {
            $(\"#myCheckbox input[type='checkbox']\").prop('checked', $(e.target).prop(\"checked\"));
        });
    });"))

and if that doesn't work, I would try

observeEvent(input[["myCheckbox"]], {
  runjs(HTML("
        $(\"#myCheckbox input[value='All']\").click(function(e) {
            $(\"#myCheckbox input[type='checkbox']\").prop('checked', $(e.target).prop(\"checked\"));
        });
    "))
})

EDIT

Here is a working solution, without using shinyjs:

library(shiny)

js <- paste(
  "$(document).ready(function(){",
  "  $('body').on('click', \"#myCheckbox input[value='All']\", function(e) {",
  "    var isChecked = $(e.target).prop('checked');",
  "    $(\"#myCheckbox input[value!='All']\").prop('checked', isChecked);",
  "  });",
  "});",
  sep = "\n"
)

ui <- fluidPage(
  tags$head(tags$script(HTML(js))),
  uiOutput("checkbox_ui")
)

server <- function(input, output, session) {
  
  output$checkbox_ui <- renderUI({
    checkboxGroupInput(inputId = "myCheckbox",
                       label = NULL,
                       choices = c("All", "A", "B"))
  })
  
}

shinyApp(ui, server)

edited Jul 30, 2021 at 20:32

answered Jul 22, 2021 at 11:06

Stéphane Laurent

85.3k18 gold badges141 silver badges263 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

6PO0222 Over a year ago

Thanks for your help ! The first JS code does not have any effect, whereas the second one only works after the All box has been checked once before.

6PO0222 Over a year ago

Would there be a way maybe to create an empty/invisible checkboxGroupInput in the UI, then updating it straight after it has bee created in the server function with updateCheckboxGroupInput?

Stéphane Laurent Over a year ago

You can try that, that sounds reasonable. Maybe an initial checkboxGroupInput with choices = "All" only?

Stéphane Laurent Over a year ago

@6PO0222 See my edit. A simpler working solution.

Daniel Ikenaga Over a year ago

After hours trying to solve the application of a mask to inputs within uiOutput, the solution of applying it within observeEvent was perfect. I believe the problem is that, when executing the javascript function, uiOutput has not yet been built, resulting in the function not being used and canceling its execution. Therefore, another solution is to add a delay to the execution of the javascript function. shinyjs::delay(10, runjs("$(.)"))

YBS · Accepted Answer · 2021-07-22 13:57:12Z

The following works fine.

js <- "
        $(\"#myCheckbox input[value='All']\").click(function(e) {
            $(\"#myCheckbox input[type='checkbox']\").prop('checked', $(e.target).prop(\"checked\"));
        });
    "

library(shinyjs)

ui <- fluidPage(
  useShinyjs(),
  
  checkboxGroupInput(inputId = "myCheckbox",
                     label = NULL,
                     choices = c("All", "A", "B"))
)

server <- function(input, output, session) {
  
  observeEvent(input[["myCheckbox"]], {
    updateCheckboxGroupInput(session,"myCheckbox")
    runjs(HTML(js))
  }, ignoreNULL = FALSE)

}

shinyApp(ui, server)

With renderUI

ui <- fluidPage(
  useShinyjs(),
  
  uiOutput("uic")
)

server <- function(input, output, session) {
  
  output$uic <- renderUI({
    checkboxGroupInput(inputId = "myCheckbox",
                       label = NULL,
                       choices = c("All", "A", "B"))
  })
  
  observeEvent(input[["myCheckbox"]], {
    updateCheckboxGroupInput(session,"myCheckbox")
    runjs(HTML(js))
  }, ignoreNULL = FALSE)
  
}

shinyApp(ui, server)

Collectives™ on Stack Overflow

Cannot run JavaScript code when Shiny `renderUI` is used

2 Answers 2

EDIT

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

EDIT

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related