Handle Javascript event within renderUI

[felloumi]

Hello,

I am using Javascript to alert user when leaving a shiny app to a non GOV website (via hyperlink). This is working fine however when the link is in a renderUI, the event is not caught. Here below a reproducible example where in Tab1 the event is caught and in Tab2 no alert is displayed. I appreciate your help on this issue.

Thanks.

## ui.R -----------------------------------------------------------------------
library(shiny)

shinyUI(
  fluidPage(
    tags$html(lang="en"), 
    
    navbarPage(title="", id="nv",
               inverse=FALSE,
               header = list(tags$head(includeScript("leaving.js"))),
               #---------------------------------------------
               tabPanel("Tab1",
                        fluidPage(
                           mainPanel(
                              tags$a("CCLE Broad Institute link1", href="https://portals.broadinstitute.org/ccle", target = "_blank",id="tmd")
                            )
                          )
                        ),
               #--------------------------------------------------------------------
               tabPanel("Tab2", 
                        fluidPage(	
                            mainPanel(
                              # htmlOutput('sourceLink'),
                              uiOutput('sourceLink')
                            )
                          )
                        ) 
               )
  )
)

# server.R ---------------------------------------------------------
library(shiny)

shinyServer (function(input, output, session) {
 
   output$sourceLink <- renderUI({
   
    tags$a("CCLE Broad Institute link2", href="https://portals.broadinstitute.org/ccle", target = "_blank",id="tmd")
    
  })
})
## leaving.js ------------------------------------------------------

$(document).ready(function() {
  
  
$("a").on("click", function () {
     var parser = document.createElement("a");
      parser.href = $(this).attr("href");
      // console.log(parser.hostname);
          if (parser.hostname != '127.0.0.1' && parser.hostname != 'localhost' && parser.hostname.indexOf(".gov") == -1) { return confirm("You are leaving the website.")}
          });


});

[raytong]

Hi @felloumi. Because the link 2 tags$a is dynamically created by renderUI that mean it was not exist when the javascript function binding, so no function bound on it. You can bind the onclick event to the existing document and attach the event handler to the child element a as the following.

$(document).ready(function() {
  $(document).on("click", "a", function () {
    var parser = document.createElement("a");
    parser.href = $(this).attr("href");
    // console.log(parser.hostname);
    if (parser.hostname != '127.0.0.1' && parser.hostname != 'localhost' && parser.hostname.indexOf(".gov") == -1) {
      return confirm("You are leaving the website.")}
  });
});

[felloumi]

@raytong

$(document).on("click", "a", function () {

Hello @raytong.
It works perfectly!
Thank you

[felloumi]

Hello @raytong

As mentioned earlier it works however if I have a plotly chart and click on the modebar "Download" I get the Alert showing I am leaving the website. I wonder you know a way to prevent this behavior?

Thanks

[raytong]

@felloumi. Add class to the tags$a and attach the event handler to the class will do.

[felloumi]

Great idea. I was looking at a way to catch event on plotly plot.
Thanks!