能否在Shiny R的ask_confirmation对话框中嵌入JavaScript功能？

问题描述 #

我有如下HTML下拉选择框代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="type">
    <option value="item0">--Select an Item--</option>
    <option value="item1">item1</option>
    <option value="item2">item2</option>
    <option value="item3">item3</option>
</select>

<select id="size">
    <option value="">-- select one -- </option>
</select>

此外，我还有如下JavaScript函数：

$(document).ready(function () {
    $("#type").change(function () {
        var val = $(this).val();
        if (val == "item1") {
            $("#size").html("<option value='test'>item1: test 1</option><option value='test2'>item1: test 2</option>");
        } else if (val == "item2") {
            $("#size").html("<option value='test'>item2: test 1</option><option value='test2'>item2: test 2</option>");
        } else if (val == "item3") {
            $("#size").html("<option value='test'>item3: test 1</option><option value='test2'>item3: test 2</option>");
        } else if (val == "item0") {
            $("#size").html("<option value=''>--select one--</option>");
        }
    });
});

我希望将上述HTML下拉选择框及JavaScript功能嵌入到我的Shiny应用的ask_confirmation对话框中。以下是我的ask_confirmation对话框代码：

ask_confirmation(
  "hi",
  title = "hi",
  type = "info", 
  width = '50%',
  html = TRUE,
  text =
    div(HTML(" my html code..
              ")))

请问这是否可行？

解决方案 #

可行，但需要调整代码并注意几个细节：

关键调整点 #

1. 移除重复jQuery引入：Shiny自带jQuery库，无需额外引入外部版本，避免版本冲突。
2. 整合HTML与JS代码：将JavaScript逻辑放在<script>标签内，和HTML结构一起传入HTML()函数。
3. 保证元素ID唯一：给对话框内的选择框ID添加前缀，避免和Shiny应用其他元素ID冲突。

修改后的完整代码示例 #

library(shiny)
library(shinyWidgets)

ui <- fluidPage(
  actionButton("show_dialog", "打开确认对话框")
)

server <- function(input, output, session) {
  observeEvent(input$show_dialog, {
    ask_confirmation(
      "hi",
      title = "选择项目",
      type = "info", 
      width = '50%',
      html = TRUE,
      text = div(HTML('
        <select id="dialog_type">
          <option value="item0">--选择一个项目--</option>
          <option value="item1">item1</option>
          <option value="item2">item2</option>
          <option value="item3">item3</option>
        </select>
        <br><br>
        <select id="dialog_size">
          <option value="">--请选择--</option>
        </select>
        <script>
          $("#dialog_type").change(function () {
            var val = $(this).val();
            if (val == "item1") {
              $("#dialog_size").html("<option value=\'test\'>item1: test 1</option><option value=\'test2\'>item1: test 2</option>");
            } else if (val == "item2") {
              $("#dialog_size").html("<option value=\'test\'>item2: test 1</option><option value=\'test2\'>item2: test 2</option>");
            } else if (val == "item3") {
              $("#dialog_size").html("<option value=\'test\'>item3: test 1</option><option value=\'test2\'>item3: test 2</option>");
            } else if (val == "item0") {
              $("#dialog_size").html("<option value=\'\'>--请选择--</option>");
            }
          });
        </script>
      '))
    )
  })
}

shinyApp(ui, server)

额外注意事项 #

• 对话框关闭后，用户的选择值不会自动同步到Shiny的input对象。如果需要获取选择结果，需添加JS代码通过Shiny.setInputValue()将值传递回Shiny。
• 确保已安装并加载shinyWidgets包，因为ask_confirmation属于该包的功能。

内容的提问来源于stack exchange，提问作者asdf1212