JavaScript 函数在 shiny.semantic 模块中不起作用（但没有错误）

Posted 2023-03-24

【中文标题】JavaScript 函数在 shiny.semantic 模块中不起作用（但没有错误）

【英文标题】：JavaScript function not working in shiny.semantic module (but no error)

【发布时间】：2021-10-05 21:56:00

【问题描述】：

按照thread 和one（都工作），我正在尝试在使用update_multiple_checkbox 的模块调用的shiny.semantic::multiple_checkbox 小部件中实现“全选”按钮。

按照approach 在文件中的 Shiny 模块中运行自定义 javascript，我的以下代码不起作用，但也不会在浏览器控制台中触发任何错误。

我还包含了一个函数来控制Shiny正确读取JS文件，就是这样。

最后，从浏览器中提取 html 代码并将其包含在带有 JS 代码的 JSFiddle 中也可以。

知道我可能在哪里弄错了吗？

应用和模块

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

【问题讨论】：

在服务器模块中，您应该在moduleServer()ns<-session$ns... 函数中使用ns<-session$ns。

【参考方案1】：

这适用于以下代码：

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);
    );

关键在于，这不是通过单击选中/取消选中复选框的input 元素，而是单击包含input 的div 元素。

【讨论】：

感谢@Stéphane Laurent。改错后问题依旧。

@6PO0222 好的。我想试试，但找不到update_multiple_checkbox。

@6PO0222 好的，我在开发版找到了。等等，我有办法。

感谢@Stéphane Laurent。我明白原理。效果很好！