CODEWITHSUNDEEP
javascriptrshinyshinyjs
WJH
WJH

Reputation: 581

JavaScript not working within modal in Shiny

I am using some JavaScript code in a Shiny app in order to style a textAreaInput inside a modal. My code looks like this:

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)

When textAreaInput(inputId = "textField", label = "window", value = "ABC") is put outside of the modal, the JavaScript code works fine. But the JavaScript code has no effect on the inputs within the modal.

Is there any solution for this?

Upvotes: 2

Views: 614

Answers (2)

YBS
YBS

Reputation: 21297

You can include the CSS code inline as shown below.

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("#textField{color: red;
                                 font-size: 20px;
                                 font-style: italic;
                                 }" ))
                 ))
               })
}

shinyApp(ui, server)

For inline javascript, try this

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)

Upvotes: 1

WJH
WJH

Reputation: 581

YBS brought me on the right track. With using JavaScript instead of CSS the code becomes like this:

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)

Upvotes: 1

Related Questions