runjs to change location in observeEvent in flexdashboard?

Question

I have a flexdashboard and there is an action button that does this:

actionButton(inputId="submit",
         label = "Submit answers",
         class="btn btn-success",
         onClick="location.href='#section-your-results';")

then an observer that does this:

observeEvent(input$submit,{
  some calculation
})

The problem is that the onClick part is executed before the observeEvent is triggered. So the calculation doesn't apply to the section I'm jumping to.

What i want to do is this:

 actionButton(inputId="submit",
         label = "Submit answers",
         class="btn btn-success")

and then have an observer that does this:

observeEvent(input$submit,{
  some calculation
  useShinyjs()
  runjs("location.href='#section-your-results';")
}))

But for some reason the runjs command isn't being executed (I also tried replacing the location.href with an alert to confirm. Any idea on what is going wrong? I have seen this answer and tried that approach as well with no luck.

Here is (for me) a reproducible example - I expect an alert box to pop up when I click submit, but it doesn't for me

---
title: "reprex shinyjs rmd"
output: 
  flexdashboard::flex_dashboard:
    orientation: rows
    vertical_layout: scroll
runtime: shiny
---

```{r setup, include=FALSE}
library(flexdashboard)
library(shinyjs)
useShinyjs(rmd = TRUE)
```

Column {data-width=650}
-----------------------------------------------------------------------

### Chart A

```{r}
onclick("submit",runjs('alert("Hello! I am an alert box!!");'))

```

### Chart B

```{r}
actionButton(inputId="submit",
         label = "Submit answers",
         class="btn btn-success")
```

It would help if you could post a fully reproducible example, so that instead of us having to copy and paste several code chunks and fill in the blanks using our own judgment, we can just see right away what the issue is and have something to work with. — DeanAttali, May 11 '18 at 03:31
I added an example - hopefully I'm just doing something dumb :) — user3920344, May 11 '18 at 15:22

score 0 · Accepted Answer · answered May 11 '18 at 16:17

So to get this to work I had to do two things:

Switch the location of the useShinyjs() to a non-setup chunk.
Change the onClick to an onEvent and watch for the event of the input being clicked.

I think that this is because the shiny input element disables to default click event for a button and thus shinyjs is watching for something that never happens.

Here's the reproducable example that works.

---
title: "reprex shinyjs rmd"
output: 
flexdashboard::flex_dashboard:
orientation: rows
vertical_layout: scroll
runtime: shiny
---

```{r setup, include=FALSE}
library(flexdashboard)
library(shinyjs)
```

Column {data-width=650}
-----------------------------------------------------------------------


```{r}
useShinyjs(rmd = TRUE)
actionButton(inputId="submit",
             label = "Submit answers",
             class="btn btn-success")
```


```{r}
observeEvent(input$submit, {
  runjs('alert("Hello! I am an alert box!!");')
})
```

runjs to change location in observeEvent in flexdashboard?

1 Answers1