Can I set html class dynamically? Or how does Shin

2019-05-25 12:43发布

问题:

So this is more of a conceptual question in response to getting a 'busy' notification working on my shiny app using the:

conditionalPanel(
        condition="$('html').hasClass('shiny-busy')",
        img(src="images/busy.gif"))

I've gotten a animation gif to show during an initial query to a database, but it becomes unpredictable after that. I added in a second conditionalPanel with to hide the output graph if a new database call is made:

conditionalPanel(
     condition="!($('html').hasClass('shiny-busy'))",
     plotOutput("Some Graph"))

The setup works through the second data pull, but if a third data base query is made, 'Some Graph' no longer hides and 'busy.gif' is no longer shown. It does flash up as a new plot is loaded.

So my overarching question is:
Is there a way to explicitly set the html class in server?
OR
How/when does Shiny set the class value?

回答1:

I'm not going to comment on the rest of the question, but I will answer the question of "is there a way to explicitly set the html class in server?"

You can use the package shinyjs to add/remove/toggle the class of an HTML element in the server. Here's an example of adding/removing the "shiny-busy" class to/form the <html> tag

library(shiny)
library(shinyjs)

runApp(shinyApp(
  ui = fluidPage(
    useShinyjs(),
    actionButton("add", "add `shiny-busy` class to html tag"),
    actionButton("remove", "remove `shiny-busy` class from html tag")
  ),
  server = function(input, output, session) {
    observeEvent(input$add, {
      shinyjs::addClass(selector = "html", class = "shiny-busy")
    })
    observeEvent(input$remove, {
      shinyjs::removeClass(selector = "html", class = "shiny-busy")
    })    
  }
))