Question:
I am trying to build my own tabsets functionality in shiny using plain javascript. This is partly an exercise for me to learn javascript and the inner workings of shiny as well as to create functions which give the user greater flexibility when it comes to styling of tabsets.RSo far I have come up with the following (based on this answer but adapted to shiny etc), which works in jsfiddle (see https://jsfiddle.net/qavoeyju/) but the shiny example does not work.
Shiny does not recognize that the second tab is activated and therefore does not trigger the reactive elements and no plot is created.
How can I tell shiny to react to the second page as well, or how can I make these custom tabs in such a way that shiny works with them?
js <- shiny::HTML('
‘)
css <- shiny::HTML(
'
‘
)
ui <- div( tags$ul( tags$li(class = "tab", id = "tab1", "data-value" = "Tab 1 CAP", "Tab 1 CAP"), tags$li(class = "tab", id = "tab2", "data-value" = "Tab 2 CAP", "Tab 2 CAP") ), div(class="tab-content", id="tab1-content", "data-value" = "Tab 1 CAP", p("1 first tab"), plotOutput("plot1") ), div(class="tab-content", id="tab2-content", "data-value" = "Tab 2 CAP", p("2 second tab"), plotOutput("plot2")), css, js ) server <- function(input, output, session) { output$plot1 <- renderPlot({ plot(1:10, rnorm(10)) }) output$plot2 <- renderPlot({ plot(1:100, rnorm(100)) }) } shinyApp(ui, server) [/code]
Tab 1 – Good
Tab 2 – Bad (plot not rendered)
Answer:
Trigger theshown event on your tab content.library(shiny)
js <- shiny::HTML('
‘)
css <- shiny::HTML(
'
‘
)
ui <- div( tags$ul( tags$li(class = "tab", id = "tab1", "data-value" = "Tab 1 CAP", "Tab 1 CAP"), tags$li(class = "tab", id = "tab2", "data-value" = "Tab 2 CAP", "Tab 2 CAP") ), div(class="tab-content", id="tab1-content", "data-value" = "Tab 1 CAP", p("1 first tab"), plotOutput("plot1") ), div(class="tab-content", id="tab2-content", "data-value" = "Tab 2 CAP", p("2 second tab"), plotOutput("plot2")), css, js ) server <- function(input, output, session) { output$plot1 <- renderPlot({ plot(1:10, rnorm(10)) }) output$plot2 <- renderPlot({ plot(1:100, rnorm(100)) }) } shinyApp(ui, server) [/code]
Shiny plotting is bound to theshown event.If you have better answer, please add a comment about this, thank you!