SeGa
SeGa

Reputation: 9809

R shiny ask confirmation before closing app/tab

I want to display a confirmation modal, before the tab/app closes but only if changes really have been made.

I found some useful functions here but they show the modal every time I want to close the app/tab. In the example below I use the goodbye-function from @Matee Gojra.

I thought I could send a boolean value from R to JavaScript and only execute the function in case a change has been made.

But apparently if I include an if-condition in the function it doesn't work anymore.

How can I make that work or is that not possible on purpose?

library(shiny)

js <- HTML("
var changes_done = false;

Shiny.addCustomMessageHandler('changes_done', function(bool_ch) {
  console.log('Are changes done?');
  console.log(bool_ch);
  changes_done = bool_ch;
});

function goodbye(e) {
  if (changes_done === true) {
    if(!e) e = window.event;

    //e.cancelBubble is supported by IE - this will kill the bubbling process.
    e.cancelBubble = true;

    //This is displayed on the dialog
    e.returnValue = 'Are you sure you want to leave without saving the changes?';

    //e.stopPropagation works in Firefox.
    if (e.stopPropagation) {
      e.stopPropagation();
      e.preventDefault();
    }
  }
}

window.onbeforeunload = goodbye;
")


ui <- fluidPage(
  tags$head(tags$script(js)),
  actionButton("add_sql", "Make Changes"),
  verbatimTextOutput("sqls")
)

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

  sqlCmd <- reactiveVal(NULL)

  ## Simulate a Change
  observeEvent(input$add_sql, {
    sqlCmd(runif(1, 1, 1000))
  })

  output$sqls <- renderPrint({
    req(sqlCmd())
    sqlCmd()
  })

  ## Are changes made? Send to JS
  observe({
    if (!is.null(sqlCmd())) {
      session$sendCustomMessage("changes_done", 'true')
    } else {
      session$sendCustomMessage("changes_done", 'false')
    }
  })
}

shinyApp(ui, server)

When this condition if (changes_done === true) {} in the JS-snippet is commented out or deleted, the modal appears before closing the app, but with it it doesn't.

Upvotes: 3

Views: 1334

Answers (1)

St&#233;phane Laurent
St&#233;phane Laurent

Reputation: 84619

You have to use TRUE, not 'true':

session$sendCustomMessage("changes_done", TRUE)

And FALSE, not 'false'.

Upvotes: 3

Related Questions