如何在R Shiny应用中让JavaScript识别服务器端生成的ID

核心原因 #

1. 你的questions.js在页面加载时立即执行，但reactOutput("modalQuestions")是动态渲染的，此时目标DOM元素还未生成，自然获取不到。
2. shiny.fluent的Toggle.shinyInput生成的最终HTML ID，会带有Shiny的命名空间前缀（如果存在），直接用原始ID查找可能不匹配。

解决方案 #

方案1：利用Shiny事件系统延迟JS执行 #

修改questions.js，等待Shiny完成连接并渲染DOM后再执行代码：

document.addEventListener("shiny:connected", function() {
  // 监听模态框渲染完成的自定义消息，确保元素已存在
  Shiny.addCustomMessageHandler("modalReady", function() {
    var bolus3h_button = document.getElementById("toggle1");
    var vraag2 = document.getElementById("vraag_2_not_within_60_minutes");
    
    // 初始隐藏第二个问题
    if(vraag2) vraag2.style.display = "none";
    
    // 绑定toggle1切换事件，控制第二个问题的显示/隐藏
    if(bolus3h_button) {
      bolus3h_button.addEventListener("change", function() {
        vraag2.style.display = this.checked ? "block" : "none";
      });
    }
  });
});

然后在server端的renderReact中，添加发送消息的代码，通知前端模态框已渲染：

output$modalQuestions <- renderReact({
  # 发送消息通知前端模态框就绪
  session$sendCustomMessage("modalReady", list())
  
  Modal(
    isOpen = modalVisibleQuestions(),
    Stack(
      tokens = list(padding = "15px", childrenGap = "10px"),
      div(
        style = list(display = "flex"),
        Text("Extra vragen", variant = "large"),
        div(style = list(flexGrow = 1)),
      ),
      div(
        p("Gaat u nog bolus toedienen 3u voor de start van de activiteit?"),
        Toggle.shinyInput("toggle1", value = FALSE),
        textOutput("toggleValue1"),
        div(
          id = "vraag_2_not_within_60_minutes",
          p("Heeft u deze dosis bolus al ingenomen?"),
          Toggle.shinyInput("toggle3", value = FALSE),
          textOutput("toggleValue3")
        ),
        p("Gaat u nog bolus toedienen 1u voor de start van de activiteit?"),
        Toggle.shinyInput("toggle2", value = FALSE),
        textOutput("toggleValue2"),
        PrimaryButton.shinyInput(style = "background-color: #47bcc9", "krijgAdvies", text = "Advies")
      )
    )
  )
})

方案2：用Shiny响应式逻辑控制显示（更符合Shiny范式） #

不需要额外JS，直接通过R代码实现交互逻辑：

1. 在server中添加响应式值跟踪toggle1状态：

toggle1State <- reactiveVal(FALSE)
observeEvent(input$toggle1, {
  toggle1State(input$toggle1)
})

2. 修改renderReact中的第二个问题div，根据toggle1状态设置显示样式：

div(
  id = "vraag_2_not_within_60_minutes",
  style = list(display = if(toggle1State()) "block" else "none"),
  p("Heeft u deze dosis bolus al ingenomen?"),
  Toggle.shinyInput("toggle3", value = FALSE),
  textOutput("toggleValue3")
)

关键注意事项 #

• 避免直接在页面加载时执行DOM操作，Shiny动态渲染的元素需等待渲染完成后再访问。
• 用R逻辑控制UI显示更符合Shiny的响应式设计，减少前后端耦合。

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