Hide image in modularized shiny app after hitting actionButton()-CodePudding

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)

CodePudding user response：

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)