How to trigger JS Script when shiny app loads

Question

I wrote this code to apply the editor class on the textarea with id = "textBox". Applying the editor class needs a javascript code to run and was looking for a way to bind the javascript run to the event of starting the app (or when the app loads). Essentially I would like to run the js when the app loads without the need to bind it to a button press as it is presently implemented. I do not know how to refer to the app load event. The button implementation was the best I could come up with and have spent considerable amount of time before asking.

Refer to this question for details on how to get the code running.

Let me know if you need anymore info on this. Would be happy to oblige. Thanks in advance.

library(shiny) 
library(shinyjs)

if (interactive()) {
     ui <- shinyUI(
    fluidPage(
      useShinyjs(),
      tags$head(tags$title("Title"),
                tags$link(rel = "stylesheet", href = "codemirror.css"),
                tags$link(rel = "stylesheet", href = "cobalt.css"),
                tags$script(src = "codemirror.js"),
                tags$script(src = "r.js")
      ),
      actionButton("btn1","Click to see code"),
      uiOutput(outputId = "textStringToDisplay")))
     server <- function(input, output){
    output$textStringToDisplay <- renderUI(
      tags$textarea(id="textBox", name = "Feedback", paste0(sample(letters,15),collapse = "")))

    ButtonPressCounter <- 0

    observeEvent(input$btn1,
                 {
                   ButtonPressCounter <<- ButtonPressCounter + 1 # Need it to happen only once
                   if(ButtonPressCounter <= 1){
                     shinyjs::runjs(
                       'var editorR = CodeMirror.fromTextArea(textBox, {
                       mode: "r",
                       lineNumbers: true,
                       smartindent: true});
                       editorR.setOption("theme", "cobalt");
                       editorR.setSize("100%","100%");')
                   }
                 })
       }
     shinyApp(ui = ui, server = server) }

Florian · Accepted Answer · 2017-12-16 09:07:41Z

2

To run javascript code on opening the app, you don' t need to put the code in an observer. If you replace your server with the following code, you will see that the log will contain the line "hello, this code has run."

  server <- function(input, output){
    output$textStringToDisplay <- renderUI(
      tags$textarea(id="textBox", name = "Feedback", paste0(sample(letters,15),collapse = "")))

    shinyjs::runjs(
      'console.log("hello, this code has run.");
       var editorR = CodeMirror.fromTextArea(textBox, {
                       mode: "r",
                       lineNumbers: true,
                       smartindent: true});
                       editorR.setOption("theme", "cobalt");
                       editorR.setSize("100%","100%");')
  }

Although the next line in the log is ReferenceError: Can't find variable: CodeMirror, so I guess there is something missing from your code?

Hope this helps!

answered Dec 16, 2017 at 9:07

Florian

25.6k5 gold badges56 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Deepak Sadulla Over a year ago

The reference error is because a few javascript and css files are not present in your app's www folder. Would you mind adding them and trying again. I tried your solution and the runjs does not run automatically. I had tried this before. You can find the files in the link in the question above. Thanks!!

bdforbes Over a year ago

I was able to get JS to run on app start using the following answer: stackoverflow.com/a/42434168/336001

Collectives™ on Stack Overflow

How to trigger JS Script when shiny app loads

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related