1

I have the following code which creates a flexdashboard:

---
title: "Untitled"
output: 
  flexdashboard::flex_dashboard:
    orientation: columns
    vertical_layout: fill
    runtime: shiny
---

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

And I want to insert some HTML and javascript code. I tried this

    Column
    -----------------------------------------------------------------------

    ### Block 1

    ```{r}
    <p>"This is a paragraph"</p>
    <script>
      alert("This is an alert")
    </script>
    ```

But it doesn't work. Please, could you help me with this question? Thank you.

Manu
  • 1,070
  • 10
  • 27
  • 2
    You wrapped your HTML and JS code in an R chunk which should result in error. Simply put the code directly in your Rmd. Moreover your closing script tag should be `` – stefan Jan 12 '21 at 21:55
  • Tag solved. Thank you Stefan – Manu Jan 12 '21 at 21:59

1 Answers1

6

You can directly type the HTML code, without chunk. You can also use the tags function of the 'htmltools' package in a chunk (or the Shiny UI functions). For JavaScript, use a js chunk.

---
title: "TEST"
output: 
  flexdashboard::flex_dashboard:
    orientation: rows
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
```

```{r packages, include=FALSE}
library(flexdashboard)
library(htmltools)
```

Page
====================================

Row
-----------------------------

### HTML and JavaScript

<button id="btn">Click me</button>

```{js, echo=FALSE}
$("#btn").on("click", function() {
  alert("You clicked the button!")
})
```

### HTML using 'htmltools'

```{r, echo=FALSE}
tags$button("Another button")
```
Stéphane Laurent
  • 75,186
  • 15
  • 119
  • 225
  • Hello @Stéphane Laurent, thanks for the explanation and answer, just a question about this syntax: `$("#btn).on("click", function()...`: do I have to access the element `btn` using `$("#`? What is the meaning of the symbol #? – Manu Jan 12 '21 at 22:04
  • 1
    @Manu This is a CSS selector. `"#btn"` is the element whose id is `btn`. The `$` is a `jQuery` function. – Stéphane Laurent Jan 12 '21 at 22:07
  • Great answer and explanation, didn't know that jQuery is used in flexdashboard. Thank you very much! – Manu Jan 12 '21 at 22:15