JavaScript 函数在 shiny.semantic 模块中不起作用(但没有错误)
JavaScript function not working in shiny.semantic module (but no error)
在此 and this 之后(均有效),我尝试在使用 update_multiple_checkbox
从模块调用的 shiny.semantic::multiple_checkbox
小部件中实现 'select all' 按钮。
在文件的 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
这适用于以下代码:
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);
});
}
重点是,这不是通过单击 checks/unchecks 复选框的 input
元素,而是单击包含 input
的 div
元素。
在此 update_multiple_checkbox
从模块调用的 shiny.semantic::multiple_checkbox
小部件中实现 'select all' 按钮。
在文件的 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
这适用于以下代码:
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);
});
}
重点是,这不是通过单击 checks/unchecks 复选框的 input
元素,而是单击包含 input
的 div
元素。