Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to pass dynamic variable from server to UI?

I have a small application in shiny:

library(shiny)

ui <- fluidPage(
#htmlOutput("d"),
tags$p(id = 'g', class =  'newClass',  'This is a paragraph'),tags$p(id = "demo"),
tags$script(HTML("var tit = document.getElementById('g');tit.onclick = function (){document.getElementById('demo').innerHTML  = Date()}"))
)

server <- function(input, output, session) {

}

shinyApp(ui, server)

This application is using javascript. When the user clicks on the sentence, the date displays. But the date is passed in the UI section itself.

My question is, Can we not pass the variable from server to UI here? For example,
we create Var1 <- Sys.Date() in server section. Now I need to pass Var1 to UI in place of Date(). Is it possible?

I have tried with below approach. But failed. Anyone please help since I do not have much knowledge on Javascript

library(shiny)
library(shinyjs)

ui <- fluidPage(
  tags$p(id = 'g', class =  'newClass',  'This is a paragraph'),tags$p(id = "demo"),
  tags$script(HTML(
  "var tit = document.getElementById('g');
   var insertion_text = Shiny.addCustomMessageHandler('bla',function(message) {return(message)};
   tit.onclick = function (){document.getElementById('demo').innerHTML  = insertion_text}"
  ))

)

server <- function(input, output, session) {

observe({
  session$sendCustomMessage(type = 'bla', message =  Sys.Date())
})


}

shinyApp(ui, server)
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Thanks for the answer. However, I tried below that I thought a simple approach and it is working

    WHat you say ?

    library(shiny)
runApp(
  list(ui = fluidPage(

        tags$p(id = 'g', class =  'newClass',  'This is a paragraph'),tags$p(id = "demo"),
        tags$script('Shiny.addCustomMessageHandler("testmessage",
        function(message)
        {
        var tit = document.getElementById("g")
        tit.onclick = function (){document.getElementById("demo").innerHTML  = message}
        }
);')
        )
  , server = function(input, output, session){
    asd <- Sys.Date()
    observe({session$sendCustomMessage(type = 'testmessage',message = asd)})
  })
)

  2. 0

    It is possible to pass dynamic variable from server to UI.

    With shinyjs::runjs()

    library(shiny)
library(shinyjs)

ui <- fluidPage(
  useShinyjs(),
  tags$p(id = 'g', class =  'newClass',  'This is a paragraph'),
  tags$p(id = "demo"),
  tags$script(HTML("var tit = document.getElementById('g');tit.onclick = function (){document.getElementById('demo').innerHTML  = Date()}")),
  actionButton("btn",
               "data from server"
  )
  
)

server <- function(input, output, session) {
  
  observeEvent(input$btn, {
    if (!(is.null(input$btn)) &&   input$btn >0 ) {
      runjs("document.getElementById('demo').innerHTML  = 'hello from server'")
    }
    
    
  }, ignoreInit = TRUE)
  
  
}

shinyApp(ui, server)

    With R session$sendCustomMessage() and js Shiny.addCustomMessageHandler()

    library(shiny)

ui <- fluidPage(
  tags$head(
    tags$script('Shiny.addCustomMessageHandler("bla",
        function(message) {
          document.getElementById("demo").innerHTML  = message
        }
      );
   ')
  ),
  tags$p(id = 'g', class =  'newClass',  'This is a paragraph'),
  tags$p(id = "demo"),
  tags$script(HTML("var tit = document.getElementById('g');tit.onclick = function (){document.getElementById('demo').innerHTML  = Date()}")),
  actionButton("btn",
               "data from server"
  )
  
)

server <- function(input, output, session) {
  
  observeEvent(input$btn, {
    if (!(is.null(input$btn)) &&   input$btn >0 ) {
      session$sendCustomMessage(type = 'bla',
                                message =  'hello from server')
    }
    
    
  }, ignoreInit = TRUE)
  
  
}

shinyApp(ui, server)

    Read also

    edited after comment

    library(shiny)


ui <- fluidPage(
  tags$head(
    tags$script('Shiny.addCustomMessageHandler("bla",
        function(message) {
          document.getElementById("demo").innerHTML  = message
        }
      );
   ')
  ),
  tags$p(id = 'g', class =  'newClass',  'This is a paragraph'),
  tags$p(id = "demo"),
  tags$script(HTML("var tit = document.getElementById('g');tit.onclick = function (){
                   Shiny.setInputValue('myclick', 1);
                   }"))
  
)

server <- function(input, output, session) {
  
  observeEvent(input$myclick, {

    if (!(is.null(input$myclick)) &&   input$myclick >0 ) {
      session$sendCustomMessage(type = 'bla',
                                message =  'hello from server')
    }
    
    
  }, ignoreInit = TRUE)
  
  
}

shinyApp(ui = ui, server = server)
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search