Server Code working with Javascript in Shiny

Question

I want to understand how we can interact server section of code with pure JS (or Jquery). I prepared two examples - Basically I want to hide h4( ) on clicking of button by user. First example works as expected but second one does not work as h4() is in renderUI( ) in server. I know this can be solved via observeEvent or shinyJS package but I am more interested to make it work with pure JS not running JS code in server.

Example 1

library(shiny)

ui <- fluidPage(
  fluidRow(
    h4("Testing"),
    actionButton("Disable", "Disable Element"),
    tags$script("
    $(document).ready(function() {
      $('#Disable').click(function(){
      $('h4').css('display', 'none');
      });
})")
  )
)

shinyApp(ui, server = function(input, output) { })

Example 2

ui <- fluidPage(
  fluidRow(
    h4("Testing"),
    uiOutput("myfun"),
    tags$script("
    $(document).ready(function() {
      $('#Disable').click(function(){
      $('h4').css('display', 'none');
      });
})")
  )
)

shinyApp(ui, server = function(input, output) {
  
  output$myfun <- renderUI({
    
    tagList(
    actionButton("Disable", "Disable Element")
    )
    
  })
  
})

MrFlick · Accepted Answer · 2021-04-18 07:38:14Z

2

One option is to add an onclick event to the button itself.

ui <- fluidPage(
  fluidRow(
    h4("Testing"),
    uiOutput("myfun"),
    tags$script("hideH4 = function() {$('h4').css('display', 'none');}")
  )
)

shinyApp(ui, server = function(input, output) {
  output$myfun <- renderUI({
    tagList(
      actionButton("Disable", "Disable Element", onclick="hideH4()")
    )
  })
})

Or add a document event hadler for the click and check the ID

ui <- fluidPage(
  fluidRow(
    h4("Testing"),
    uiOutput("myfun"),
    tags$script("
    $(document).click(function(evt) {
      if (evt.target.id=='Disable') {
         $('h4').css('display', 'none');
      }})")
    )
)

shinyApp(ui, server = function(input, output) {
  output$myfun <- renderUI({
    tagList(
      actionButton("Disable", "Disable Element")
    )
  })
})

edited Apr 18, 2021 at 7:38

answered Apr 18, 2021 at 7:31

MrFlick

209k19 gold badges300 silver badges324 bronze badges

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

2 Comments

Ujjawal Bhandari Over a year ago

Thanks a ton. Your second solution works for me. Just a question - console.log(evt.target) does not return anything in console? any reference for me please to read in detail about document event handler

MrFlick Over a year ago

I removed that. I forgot it was there.

Collectives™ on Stack Overflow

Server Code working with Javascript in Shiny

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related