JavaScript 在 Shiny 的模态中不起作用

Posted

技术标签:

【中文标题】JavaScript 在 Shiny 的模态中不起作用【英文标题】:JavaScript not working within modal in Shiny 【发布时间】:2021-06-01 03:00:51 【问题描述】:

我在 Shiny 应用程序中使用了一些 javascript 代码,以便在模式中设置 textAreaInput 的样式。我的代码如下所示:

library(shiny)

codeJS <- "
  document.addEventListener('DOMContentLoaded', function(event)
                  
    function init (inputID) 
    
      var text = document.getElementById(inputID);
      text.style.color = 'blue';
    ;
  
    init('textField');
  )"

ui <- fluidPage(
  tags$script(html(codeJS)),
  actionButton(inputId="openModal", label="Open modal")
)

server <- function(input, output, session)

  observeEvent(input$openModal,
  
    showModal(modalDialog(
      textAreaInput(inputId = "textField", label = "window", value = "ABC")
    ))
  )


shinyApp(ui, server)

textAreaInput(inputId = "textField", label = "window", value = "ABC") 放在模态框之外时,JavaScript 代码可以正常工作。但是 JavaScript 代码对模态框内的输入没有影响。

有什么解决办法吗?

【问题讨论】:

【参考方案1】:

YBS 让我走上了正轨。使用 JavaScript 而不是 CSS,代码变成这样:

codeJS <- "
  function init (inputID) 
  
    var text = document.getElementById(inputID);
        text.style.color     = 'red';
        text.style.fontSize  = '20px';
        text.style.fontStyle = 'italic';
  ;
  
  init('textField');"

ui <- fluidPage(
  actionButton(inputId="openModal", label="Open modal")
)

server <- function(input, output, session)

  observeEvent(input$openModal,
  
    showModal(modalDialog(
      textAreaInput(inputId = "textField", label = "window", value = "ABC"),
      tags$script(HTML(codeJS))
    ))
  )


shinyApp(ui, server)

【讨论】:

你能告诉你运行脚本时出了什么问题吗? 您的回答很好。抱歉,我没有复制新的 codeJS 脚本,因为我认为您的原始 codeJS 没有更改。【参考方案2】:

您可以包含如下所示的内联 CSS 代码。

ui <- fluidPage(
  #tags$script(HTML(codeJS)),
  actionButton(inputId="openModal", label="Open modal")
)

server <- function(input, output, session)

  observeEvent(input$openModal,
               
                 showModal(modalDialog(
                   textAreaInput(inputId = "textField", label = "window", value = "ABC"),
                   tags$head(tags$style("#textFieldcolor: red;
                                 font-size: 20px;
                                 font-style: italic;
                                 " ))
                 ))
               )


shinyApp(ui, server)

对于内联 javascript,试试这个

ui <- fluidPage(
  actionButton(inputId="openModal", label="Open modal")
)

server <- function(input, output, session)

  observeEvent(input$openModal,
               
                 showModal(modalDialog(
                   textAreaInput(inputId = "textField", label = "window", value = "ABC"),
                   tags$script(HTML('document.getElementById("textField").style.color = "red"'))
                 ))
               )


shinyApp(ui, server)

【讨论】:

你让我走上了正轨。但我想使用 JavaScript 而不是 CSS。

以上是关于JavaScript 在 Shiny 的模态中不起作用的主要内容,如果未能解决你的问题,请参考以下文章

link_to 弹出模态 div 在 Rails 中不起作用

为啥 `R` 管道运算符 `|>` 在使用 Shiny 的反应式编程中不起作用?

eModal 在 bootstrap 3 中加载 javascript 但在 bootstrap 4 中不起作用

范围绑定在模态弹出窗口angularjs中不起作用

以模态方式呈现的 UIPopoverController 在 iOS 5 中不起作用

TouchableOpacity 和按钮在反应原生模态中不起作用?