无法将 JavaScript 代码插入 R shiny.semantic 应用程序答案

【问题标题】：Cannot insert JavaScript code into a R shiny.semantic app无法将 JavaScript 代码插入 R shiny.semantic 应用程序
【发布时间】：2021-09-28 19:05:00
【问题描述】：

我在将 javascript 代码插入 Shiny 应用程序时遇到问题（单击/取消单击 All 框应选中/取消选中所有框）。

app.R

library(shiny.semantic)

ui <- semanticPage(
    multiple_checkbox(input_id = "myCheckbox",
                      label = NULL,
                      choices = c("All", "A", "B"),
                      class = "customCheckbox"),
    
    includeScript(path = "www/myscript.js"),
)
    
server <- function(input, output, session) {
    
}

shinyApp(ui, server)

myscript.js

$(".customCheckbox input[value='All']").click(function(e) {
  $(".customCheckbox input[type='checkbox']").prop('checked', $(e.target).prop("checked"));
});

我知道javascript 代码的工作方式如下所示。

$(".customCheckbox input[value='All']").click(function(e) {
  $(".customCheckbox input[type='checkbox']").prop('checked', $(e.target).prop("checked"));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div class="ui form grouped fields ss-checkbox-input customCheckbox" id="myCheckbox">
  <label for="myCheckbox"></label>
  <div class="field">
    <div class="ui checkbox  ">
      <input type="checkbox" name="myCheckbox" tabindex="0" value="All"/>
      <label>All</label>
    </div>
  </div>
  <div class="field">
    <div class="ui checkbox  ">
      <input type="checkbox" name="myCheckbox" tabindex="0" value="A"/>
      <label>A</label>
    </div>
  </div>
  <div class="field">
    <div class="ui checkbox  ">
      <input type="checkbox" name="myCheckbox" tabindex="0" value="B"/>
      <label>B</label>
    </div>
  </div>
</div>

我还尝试了不同的方法将 javascript 代码插入 Shiny 应用程序。

app_2.R

library(shiny.semantic)
library(shinyjs)

ui <- semanticPage(
    useShinyjs(),
    
    multiple_checkbox(input_id = "myCheckbox",
                      label = NULL,
                      choices = c("All", "A", "B"),
                      class = "customCheckbox")
)
    
server <- function(input, output, session) {
    runjs(HTML("
        $(\".customCheckbox input[value='All']\").click(function(e) {
            $(\".customCheckbox input[type='checkbox']\").prop('checked', $(e.target).prop(\"checked\"));
        });
    "))
}

shinyApp(ui, server)

app_3.R

library(shiny.semantic)

ui <- semanticPage(
    tags$script(src = "myscript.js"),
    # OR 
    #tags$head(tags$script(src = "myscript.js"))
    
    multiple_checkbox(input_id = "myCheckbox",
                      label = NULL,
                      choices = c("All", "A", "B"),
                      class = "customCheckbox")
)
    
server <- function(input, output, session) {}

shinyApp(ui, server)

编辑

当使用shiny::fluidPage 而不是shiny.semantic::semanticPage 时，一切正常。但是我需要坚持shiny.semantic。

library(shiny.semantic)

ui <- fluidPage(
    multiple_checkbox(input_id = "myCheckbox",
                      label = NULL,
                      choices = c("All", "A", "B"),
                      class = "customCheckbox"),
    includeScript(path = "www/myscript.js"),
)
    
server <- function(input, output, session) {}

shinyApp(ui, server)

【问题讨论】：

您的 app_2.R 对我来说运行良好。也许你只需要重启 RStudio。
@YBS 我尝试重新启动 RStudio，但没有成功。我注意到问题来自ui <- semanticPage(...)。 JS 脚本在使用 ui <- fluidPage(...) 时工作正常（见编辑）。我使用shinyjs_1.1、shiny.semantic_0.4.3 和shiny_1.5.0。
我有shinyjs_2.0 和shiny.semantic_0.4.0。同样闪亮。
@YBS 安装你的包版本没有帮助。

标签： javascript r shiny

【解决方案1】：

实际上，我通过删除 All 框的 hidden 类找到了解决方法。

library(shiny.semantic)
library(shinyjs)

ui <- semanticPage(
    useShinyjs(),
    
    multiple_checkbox(input_id = "myCheckbox",
                      label = NULL,
                      choices = c("All", "A", "B"),
                      class = "customCheckbox")
)

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

shinyApp(ui, server)

【讨论】：