How to use JQuery to trigger a button click that procs observeEvent in Shiny?

Question

Let's say that I have two actionButtons in my app that are left and right arrows. They're used to navigate through multiple data tables and plots and given an id of "left" and "right". What I'd like is to be able to navigate with the arrow keys on my keyboard as well. I thought I'd be able to use JQuery to simply trigger a click event on those buttons, but that doesn't appear to get communicated to Shiny.

So, is there a different way for me to do this? Here's the JQuery I'm currently using:

$(document.ready(function() {
    $("body").keydown(function(e) {
        if (e.which === 37) {
            $("#plot-left").trigger("click");
        } else if (e.which === 39) {
            $("#plot-right").trigger("click");
        }
     });
});

On Shiny's side, I've got this code:

  increase_counter <- function() {
    values$counter <- values$counter + 1
    if (values$counter > values$cluster_count) values$counter <- 1
  }

  decrease_counter <- function() {
    values$counter <- values$counter - 1
    if (values$counter == 0) values$counter <- values$cluster_count
  }

  observeEvent(input$plot_left, {
    decrease_counter()
  })

  observeEvent(input$plot_right, {
    increase_counter()
  })

Edit

The JQuery function is working, which is proven by the use of console.log() inside of the jquery. The problem is that the triggered button press is not being communicated back to the Shiny server causing it to run its commands.

This isn't a crucial feature, but it'd be nice to accomplish. Thanks!

Answer 1

You say you added a console.log() statement, but I don't see how that would have worked. Have you actually tried debugging your code by opening the JavaScript console in your browser and try to step through the function? When I run your JS code, I see there's a small syntax error with it. There's a missing closing bracket after document . When I fixed that, it worked fine. Here's a sample app (please include a FULL reproducible example next time, not just the server code)

library(shiny)

jscode <- 
'
$(document).ready(function() {
$("body").keydown(function(e) {
if (e.which === 37) {
  $("#left").trigger("click");
} else if (e.which === 39) {
  $("#right").trigger("click");
}
});
});
'

ui <- fluidPage(
  tags$script(jscode),
  actionButton("left", "Left"),
  actionButton("right", "Right")
)

server <- function(input, output, session) {
  observeEvent(input$left, {
    cat("left\n")
  })
  observeEvent(input$right, {
    cat("right\n")
  })
}

shinyApp(ui = ui, server = server)

Answer 2

Try this

$("body").keydown(function(e) {
  if(e.keyCode == 37) { // left
    // click left
    });
  }
  else if(e.keyCode == 39) { // right
    // click right
  }
});