update modal UI before opening the modal

Question

From the second time on when you click the button that opens the modal the modal opens showing the old data at first and then the update of the render-function is triggered.

library(shiny)

showMyModal <- function() {
  showModal(
    modalDialog(
      verbatimTextOutput("mytext"),
      footer = tagList(
        modalButton("Dismiss"),
      )
    )
  )
}

ui <- fluidPage(
  actionButton("openDialog", "Open dialog")
)

server <- function(input, output, session) {
  
  observeEvent(input$openDialog, {
    showMyModal()
  })
  
  output$mytext <- renderPrint({
    input$openDialog
  })
  
}

shinyApp(ui = ui, server = server)

Is there a smart way to first update the modal UI and only afterwards opening the modal? I am looking for a way that the modal does not show outdated data before it gets refreshed.

score 1 · Accepted Answer · answered Apr 25 '23 at 14:30

This is an approach utilizing my earlier answer here.

The following is blocking the display of your modalDialog until the modal has been (re)rendered:

library(shiny)

showMyModal <- function() {
  showModal(
    conditionalPanel("input.modal_visible == true",
                     modalDialog(
                       verbatimTextOutput("mytext"),
                       footer = tagList(
                         modalButton("Dismiss"),
                       )
                     )
    )
  )
}

ui <- fluidPage(
  tags$script(HTML(
    "$(document).on('shown.bs.modal','#shiny-modal', function () {
       Shiny.setInputValue(id = 'modal_visible', value = true);
      });
     $(document).on('hidden.bs.modal','#shiny-modal', function () {
       Shiny.setInputValue(id = 'modal_visible', value = false);
     });"
  )),
  actionButton("openDialog", "Open dialog")
)

server <- function(input, output, session) {
  observeEvent(input$openDialog, {
    showMyModal()
  })
  
  output$mytext <- renderPrint({
    input$openDialog
  })
}

shinyApp(ui = ui, server = server)

update modal UI before opening the modal

1 Answers1