Когда обновляются какие-либо вкладки, страница автоматически переходит на первую вкладку

Question

в приведенном ниже приложении, когда пользователь не находится ни в tab2, ни в tab3 и нажимает refre sh, страница переходит на tab1. Можем ли мы избежать этого и удостовериться, что страница находится в соответствующей вкладке после обновления: small_smile: Возможно ли это сделать, сообщите мне.

library(shiny)
ui <- fluidPage(
  tabsetPanel(
    id="inTabset",
    tabPanel("Tab 1",actionButton("switch_tab", "Go to the third tab")
    ),
    tabPanel("Tab 2", "there!"),
    tabPanel("Tab 3", "there!"))

)

server <- function(input, output, session) {

  observeEvent(input$switch_tab, {
    updateTabsetPanel(session, "inTabset",selected = "Tab 3")
  })

}
shinyApp(ui = ui, server = server)

Answer 1

Вам нужно сохранить состояние, и Shiny имеет систему закладок для этого, но в вашем случае вам, вероятно, понадобится sh, чтобы иметь более невидимый механизм.

Добавьте Cook ie. js JavaScript library в ваше приложение Shiny, например:

 tags$head(tags$script(src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.2.1/js.cookie.min.js")),
        tags$head(tags$script(src="app.js")),
        tabsetPanel(
            id="inTabset",
            tabPanel("Tab 1",actionButton("switch_tab", "Go to the third tab")),
            tabPanel("Tab 2", "there!"),
            tabPanel("Tab 3", "there!")),

и создайте файл app.js в www-directory вашего Shiny root со следующим содержимым:

$(document).ready(function(){
   $("a[data-toggle='tab']").click(function(){
     const tabId = $(this).data("value");
     Cookies.set('tabId', tabId);
   })
   const cookieTabId = Cookies.get("tabId");
   if(cookieTabId){
     console.log(`Restoring tab '${cookieTabId}'`); 
     $(`a[data-value='${cookieTabId}']`).tab('show');
   }
 })

Самым сложным в вышеприведенном JS являются селекторы jQuery и show() method из Bootstrap.

Вы также можете перенести выбранное значение вкладки на сервер и сохранить значения сеанса для каждого пользователя в хранилище данных. Это приведет к сохранению состояния за пределами браузера пользователя.

Решение можно скачать здесь.