JavaScript function not working in shiny.semantic module (but no error)

Question

Following this thread and this one (both working), I am trying to implement a 'select all' button in a shiny.semantic::multiple_checkbox widget called from a module using update_multiple_checkbox.

Following this approach for running a custom JavaScript in a Shiny module from a file, my following code does not work but does not trigger any error in the browser console neither.

I also included a function to control that Shiny reads the JS file properly, which is the case.

Finally, extracting the HTML code from the browser and including it in a JSFiddle with the JS code works as well.

Any idea where I could be mistaken?

App & Module

library(shiny)
library(shiny.semantic)
library(shinyjs)
library(glue)


### MODULE ui ###
checkModule_ui <- function(id) {
    ns <- NS(id)
    
    multiple_checkbox(input_id = ns("myCheckbox"),
                      label = NULL,
                      choices = "")
}

### MODULE server ###
checkModule_server <- function(id){
    ns <- NS(id)
    
    moduleServer(id, function(input, output, session){
        update_multiple_checkbox(session = session,
                                 input_id = "myCheckbox",
                                 choices = c("All", "A", "B"),
                                 selected = c("All", "A", "B"))
        
        shinyjs::runjs(glue("checkModuleJSFunction('{ns(\"\")}', 'myCheckbox');"))
        
        #Control that Shiny sees the JS file and the selector
        shinyjs::runjs(glue("control_JS('{ns(\"\")}', 'myCheckbox');"))
    })
}

### APP ui ###
ui <- semanticPage(
    suppressDependencies("bootstrap"),
    useShinyjs(),
    
    tags$head(
        tags$script(src = "checkModuleJS.js")
    ),
    
    checkModule_ui(id = "moduleID")
)

### APP server ###
server <- function(input, output, session) {
    checkModule_server(id = "moduleID")
}

shinyApp(ui, server)

www/checkModuleJS.js

function checkModuleJSFunction(ns, id) {
    $("#" + ns + id + " input[value='All']").removeClass("hidden");
    
    $("#" + ns + id + " input[value='All']").click(function(e) {
        $("#" + ns + id + " input[type='checkbox']").prop('checked', $(e.target).prop("checked"));
    });
}

/* Control that Shiny sees this JS file and the selector*/
function control_JS(ns, id) {
    console.log("#" + ns + id + " input[value='All']");
}

sessionInfo()

R version 3.6.3
shiny_1.5.0
shiny.semantic_0.4.3
shinyjs_2.0.0.9000
glue_1.4.2

In the server module you should use ns<-session$ns inside the moduleServer(){ns<-session$ns...} function. — YBS
– YBS, Commented Jul 30, 2021 at 14:26

Stéphane Laurent · Accepted Answer · 2021-07-30 15:34:59Z

1

This works with this code:

function checkModuleJSFunction(ns, id) {
  id = "#" + ns + id;
  $("body") 
    .on("click", id + " > div:nth-child(2) > div", function (e) {
      var allIsChecked = $(id + " input[value='All']").prop("checked");
      $(id + " .ui.checkbox" + " input[value!='All']")
        .prop("checked", allIsChecked);
    });
}

The point is that this is not by clicking on an input element that checks/unchecks the checkbox, but on the div element which contains the input.

edited Jul 30, 2021 at 15:34

answered Jul 30, 2021 at 12:18

Stéphane Laurent

85.3k18 gold badges141 silver badges263 bronze badges

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

4 Comments

6PO0222 Over a year ago

Thanks @Stéphane Laurent. After correcting the typo, the problem still persists.

Stéphane Laurent Over a year ago

@6PO0222 Ok. I wanted to try but I don't find update_multiple_checkbox.

Stéphane Laurent Over a year ago

@6PO0222 Ok, I find it in the development version. Wait, I have a solution.

6PO0222 Over a year ago

Thanks @Stéphane Laurent. I understand the principle. It works very well !

Collectives™ on Stack Overflow

JavaScript function not working in shiny.semantic module (but no error)

App & Module

www/checkModuleJS.js

sessionInfo()

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

App & Module

www/checkModuleJS.js

sessionInfo()

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related