Use runjs in an observeEvent, run only the second time

[GuillaumeR]

Hello, I want to make a scroll in my Shiny app at the bottom of the screen after a fileInput, but the runjs code runs only the second time as I ve upload the file . (but not the first time)
UI

column(12,
                        fluidRow(     
                          column(width = 6,align="center",
                                 h4("Data second table"),
                                 fileInput("dataFile2",label = NULL,
                                           buttonLabel = "Browse...",
                                           placeholder = "No file selected",
                                           multiple = FALSE,
                                 )),

bottom of the UI
tags$div(id="bottom", "I'm at the bottom, javascript can scroll me into view"),

Server

observeEvent(input$dataFile2, {
    
    cat(file=stderr(), "Debug on appel l'ouverture de selection de fichier", "\n")
   # js$refocus("downloadDataCSV") 
   
    runjs('document.getElementById("bottom").scrollIntoView();')
  })

[nirgrahamuk]

Hi!

To help us help you, could you please prepare a reproducible example (reprex) illustrating your issue? Please have a look at this guide, to see how to create one:

FAQ: How to do a minimal reproducible example ( reprex ) for beginners

A minimal reproducible example consists of the following items: A minimal dataset, necessary to reproduce the issue The minimal runnable code necessary to reproduce the issue, which can be run on the given dataset, and including the necessary information on the used packages. Let's quickly go over each one of these with examples: Minimal Dataset (Sample Data) You need to provide a data frame that is small enough to be (reasonably) pasted on a post, but big enough to reproduce your issue. Let's say, as an example, that you are working with the iris data frame head(iris) #> Sepal.Length Sepal.Width Petal.Length Petal.Width Species #> 1 5.1 3.5 1.4 0.…

[GuillaumeR]

Hello, this is a minimum example of the problem, and I see that the runjs doesn't run.
runjs('document.getElementById("top").scrollIntoView();')
Do you have an idea to make it functionnal ?

library(shiny)
library(shinyjs)
library(shinydashboard)
library(DT)
library(shinyFeedback)
ui <- fluidPage(
      fileInput("file1", "Choose CSV File",
                accept = c(
                  "text/csv",
                  "text/comma-separated-values,text/plain",
                  ".csv")),
                checkboxInput("header1", "Header", TRUE),
      
      tags$hr(),
      fileInput("file2", "Choose CSV File",
                accept = c(
                  "text/csv",
                  "text/comma-separated-values,text/plain",
                  ".csv")),
      checkboxInput("header2", "Header", TRUE),
      tags$div(id="top", "I'm at the top, javascript can scroll me into view"),
      tags$br(),
      tags$br(),      
      tags$br(),      
      tags$br(),      
      tags$br(),      
      tags$br(),      
      tags$br(),      
      tags$br(),      
      tags$br(),      
      tags$br(),      
      tableOutput("contents1"),
      tableOutput("contents2"),
      tags$br(),
      tags$br(),      
      tags$br(),      
      tags$br(),      
      tags$br(),      
      tags$br(),      
      tags$br(),      
      tags$br(),      
      tags$br(),      
     
      tags$div(id="bottom", "I'm at the bottom, javascript can scroll me into view"),
      )


server <- function(input, output) {
  observeEvent(input$file1, {
    runjs('document.getElementById("bottom").scrollIntoView();')
    
  })
  
  observeEvent(input$file2, {
    runjs('document.getElementById("top").scrollIntoView();')
    
  })
  output$contents1 <- renderTable({
    inFile <- input$file1
    
    if (is.null(inFile))
      return(NULL)
    
    read.csv(inFile$datapath, header = input$header1)
  })
  
  output$contents2 <- renderTable({
    inFile <- input$file2
    
    if (is.null(inFile))
      return(NULL)
    
    read.csv(inFile$datapath, header = input$header2)
  })
}

shinyApp(ui, server)

[nirgrahamuk]

shinyjs requires useShinyjs() in the ui

[GuillaumeR]

Hello Nirgrahamuk, you are right, I've updated with useShinyjs() and I ve the problem that the "runjs scrollview" runs only after a first upload of the file choosed in the inputfile. Have you already had such a problem ?

[nirgrahamuk]

@GuillaumeR

I ve the problem that the "runjs scrollview" runs only after a first upload of the file choosed in the inputfile.

I dont understand.
File is uploaded and then the scroll happens.
What is not desired about this?

[GuillaumeR]

I ve tried, the runjs scrollview will run really the second time of a upload, and not the first time, you 'll see the issue well if you add sometags$br(), to be out of the screen.

[nirgrahamuk]

I don't know what to tell you.
It works immediately for me.
I load a first file, my browser is scrolled...