Incorrect behavior of Observe on actionButton in DT::DTOutput in shiny module

Question

The example of code below generate simple shinyApp which contain numeric input and data table with button in rows. Numbers of row in data table the same as numeric input. Also every button is observed and generate alert when pushed.

library(shiny)
library(DT)
library(shinyjs)

exampleModuleUI <- function(id) {
    ns <- NS(id)

    DT::DTOutput(ns("table"))
}

exampleModule <- function(input, output, session, max.index) {
    ns <- session$ns

    output$table <- renderDataTable(
        data.frame(
            buttons = unlist(
                lapply(
                    1:max.index, 
                    function(index) {
                        as.character(
                            actionButton(
                                ns(as.character(index)), 
                                as.character(index)
                            )
                        )
                    }
                )
            )
        ),
        escape = FALSE, 
        style = 'bootstrap',
        extensions = 'FixedColumns',
        options = list(
            preDrawCallback = JS('function() { Shiny.unbindAll(this.api().table().node()); }'),
            drawCallback = JS('function() { Shiny.bindAll(this.api().table().node()); } ')
        )
    )

    lapply(
        1:max.index, 
        function(index) {
            observeEvent(input[[as.character(index)]], {
                shinyjs::alert(as.character(index))
            })
        }
    )
}

ui <- fixedPage(
    useShinyjs(),
    numericInput(
        "count", 
        "Count of button in table",
        value = 3,
        min = 3, 
        max = 7, 
        step = 1
    ),
    exampleModuleUI("dt.table")
)

server <- function(input, output, session) {
    max.count <- reactive({
        input$count
    })

    observeEvent(
        max.count(), {
            callModule(exampleModule, "dt.table", max.count())
        }
    )
}

shinyApp(ui, server)

The problem
If in numeric input enter for example "7" at first then "6" then again "7" no one buttons will be observed anymore. It seems like something go wrong when you call some module again, but particular reason is unclear for me. But the most interesting question is "How to make it work?"

score 0 · Answer 1 · answered Jun 08 '19 at 15:08

That's because you have to unbind before a new table is drawn.

Instead of calling the module several times, you can pass a reactive conductor to max.index.

I've also added a reactive value which collects the already existing observers, in order to not define them multiple times.

library(shiny)
library(DT)
library(shinyjs)

exampleModuleUI <- function(id) {
  ns <- NS(id)
  DT::DTOutput(ns("table"))
}

exampleModule <- function(input, output, session, max.index) {
  ns <- session$ns

  output$table <- renderDataTable(
    data.frame(
      buttons = unlist(
        lapply(
          1:max.index(), 
          function(index) {
            as.character(
              actionButton(
                ns(as.character(index)), 
                as.character(index)
              )
            )
          }
        )
      )
    ),
    escape = FALSE, 
    style = 'bootstrap',
    extensions = 'FixedColumns',
    options = list(
      preDrawCallback = JS('function() { Shiny.unbindAll(this.api().table().node()); }'),
      drawCallback = JS('function() { Shiny.bindAll(this.api().table().node()); } ')
    )
  )

  observers <- reactiveVal(NULL) # to store the existing observers

  observeEvent(max.index(), {
    runjs('Shiny.unbindAll($("#dt-table").find("table").DataTable().table().node());')
    lapply(
      setdiff(1:max.index(), observers()), 
      function(index) {
        observers(c(observers(),index)) # add index to the existing observers
        observeEvent(input[[as.character(index)]], {
          shinyjs::alert(as.character(index))
        }, ignoreInit = TRUE)
      }
    )
  })
}

ui <- fixedPage(
  useShinyjs(),
  numericInput(
    "count", 
    "Count of button in table",
    value = 3,
    min = 3, 
    max = 7, 
    step = 1
  ),
  exampleModuleUI("dt")
)

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

  max.count <- reactive({
    input$count
  })

  callModule(exampleModule, "dt", max.count)

}

shinyApp(ui, server)

Incorrect behavior of Observe on actionButton in DT::DTOutput in shiny module

1 Answers1