Search code examples
rimageshinymoduleshinyjs

Hide image in modularized shiny app after hitting actionButton()


In the shiny app below I want an image to be displayed upon app loading for first time and then be hidden after clicking the actionButton().

library(shiny)
library(shinyjs)
library(shinydashboard)
library(dplyr)
# Some data

sideUI <- function(id) {
  ns <- NS(id)
  tagList(
    actionButton(ns("action"),"Submit")
  )
  
}


# In this case this server not needed but using uiOuput/renderUI in real case
# sideServer <- function(id) { moduleServer(id,function(input, output, session) { })}

# Define the UI and server functions for the map
sideServer <- function(id) {
  moduleServer(
    id,
    function(input, output, session) {
      return(btn = reactive(input$action))
    })
}
imgUI <- function(id) {
  ns <- NS(id)
  
  tagList(
    div(
      id = "showimg", 
      img(src='apps.png', align = "center"))
  )
}

textServer <- function(id, btn) {
  moduleServer(
    id,
    function(input, output, session) {
      observeEvent(btn(), {
        shinyjs::hide(id = "showimg")
      })
    })
  
  
}
# Build ui & server and then run
ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(sideUI("side")),
  dashboardBody(useShinyjs(),imgUI("imgPL"))
)
server <- function(input, output, session) {
  
  # use the reactive in another module
  city_input <- sideServer("side")
  textServer("imgPL", btn = city_input$btn)
  
}
shinyApp(ui, server)    

Solution

  • You forgot to wrap the div-id around ns().

    library(shiny)
    library(shinyjs)
    library(shinydashboard)
    library(dplyr)
    # Some data
    
    sideUI <- function(id) {
      ns <- NS(id)
      tagList(
        actionButton(ns("action"),"Submit")
      )
      
    }
    
    
    # In this case this server not needed but using uiOuput/renderUI in real case
    # sideServer <- function(id) { moduleServer(id,function(input, output, session) { })}
    
    # Define the UI and server functions for the map
    sideServer <- function(id) {
      moduleServer(
        id,
        function(input, output, session) {
          return( 
            list(
              btn = reactive(input$action)
            ) 
          )
        })
    }
    imgUI <- function(id) {
      ns <- NS(id)
      
      tagList(
        div(
          id = ns("showimg"),  # <-------------------- don't forget this for UI elemtns in modules
          img(src='img.png', align = "center"))
      )
    }
    
    textServer <- function(id, btn) {
      moduleServer(
        id,
        function(input, output, session) {
          observeEvent(btn(), {
            shinyjs::hide(id = "showimg")
          })
        }
      )
    }
    
        
        
    # Build ui & server and then run
    ui <- dashboardPage(
      dashboardHeader(),
      dashboardSidebar(sideUI("side")),
      dashboardBody(
          useShinyjs(),
          imgUI("imgPL")
        
        )
    )
    server <- function(input, output, session) {
      
      # use the reactive in another module
      city_input <- sideServer("side")
      
      textServer("imgPL", btn = city_input$btn)
      
    }
    shinyApp(ui, server)