ActionButton with a href to another reactive object

[charlott...@gmail.com]

Hi everyone,

I have a shiny app with a really long page, and I would like to create an actionButton that allows user to go directly to one particular reactiveObject.

As I already programed in html I thought about href and local anchor.

For a text no problem, I would add an href = "#Object" to the a() (http://stackoverflow.com/questions/28605185/create-link-to-the-other-part-of-the-shiny-app), but for an actionButton, I can not figure out how to do that (perhaps with a div?).

Here is my code for an reproducible example:

library(shiny)

runApp(
  # Ui
  list(ui = pageWithSidebar(
    headerPanel("Test App"),
   
    sidebarPanel(
      div(actionButton("Go", "Go to the Button"), href ="#try" )),
   
    mainPanel("Hello World!",
              br(),
              br(),
              br(),
              br(),
              br(),
              br(),
              br(),
              br(),
              br(),
              br(),
              br(),
              br(),
              br(),
              br(),
              br(),
              br(),
              br(),
              br(),
              br(),
              br(),
              br(),
              br(),
              br(),
              br(),
              br(),
              br(),
              br(),
              br(),
              br(),
              br(),
              br(),
              br(),
              br(),
              br(),
              br(),
              br(),
              br(),
              br(),
              br(),
              br(),
              br(),
              br(),
              br(),
              br(),
              br(),
              br(),
              br(),
              br(),
              br(),
              uiOutput("try")
              )
  ),
 
  # Server
  server = function(input, output, session) {
   
    output$try <- renderUI({
      actionButton("Well", "well done!")
    })
  }
))

Sorry for the br(), but I needed to recreate the length of the page.

Do you have any idea for doing that ?

Thanks in advance for your help

Cheers

[charlott...@gmail.com]

And I need to precise that I would like that the whole the actionButton (not only the text) have a link to the reactiveObject

(not like that:

actionButton(inputId = "coucou", label = HTML("<a href='#try'>Go to plot 2</a>"))

)

so perhaps with a onlick = "#try", but it did not work neither:

library(shiny)

runApp(
  # Ui
  list(ui = pageWithSidebar(
    headerPanel("Test App"),
   
    sidebarPanel(

      actionButton("coucou", "coucou", onclick ='#try')),

Thanks again

[Laz C. Peterson]

Hello Charlotte --

I know that the way Shiny processes some of the code makes it a little more difficult to get that custom functionality you're looking for -- at least for me.  Give this one a try:

library(shiny)

ui<-fluidPage(
    tags$p(style='text-align:center;','Top of the page!'),
    tags$div(style='text-align:center;',tags$button(type='button',onClick='$("html,body").animate({scrollTop:$("#myAnchor").offset().top},500)',class='btn btn-primary','Go to Anchor')),
    tags$br(),tags$br(),tags$br(),tags$br(),tags$br(),tags$br(),tags$br(),tags$br(),tags$br(),tags$br(),tags$br(),tags$br(),
    tags$br(),tags$br(),tags$br(),tags$br(),tags$br(),tags$br(),tags$br(),tags$br(),tags$br(),tags$br(),tags$br(),tags$br(),
    tags$br(),tags$br(),tags$br(),tags$br(),tags$br(),tags$br(),tags$br(),tags$br(),tags$br(),tags$br(),tags$br(),tags$br(),
    tags$br(),tags$br(),tags$br(),tags$br(),tags$br(),tags$br(),tags$br(),tags$br(),tags$br(),tags$br(),tags$br(),tags$br(),
    tags$br(),tags$br(),tags$br(),tags$br(),tags$br(),tags$br(),tags$br(),tags$br(),tags$br(),tags$br(),tags$br(),tags$br(),
    tags$br(),tags$br(),tags$br(),tags$br(),tags$br(),tags$br(),tags$br(),tags$br(),tags$br(),tags$br(),tags$br(),tags$br(),
    tags$br(),tags$br(),tags$br(),tags$br(),tags$br(),tags$br(),tags$br(),tags$br(),tags$br(),tags$br(),tags$br(),tags$br(),
    tags$p(name='myAnchor',id='myAnchor',style='text-align:center;','Bottom of the page!')
)

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

shinyApp(ui,server)

~Laz Peterson
Paravis, LLC

--
You received this message because you are subscribed to the Google Groups "Shiny - Web Framework for R" group.
To unsubscribe from this group and stop receiving emails from it, send an email to shiny-discus...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/shiny-discuss/5230ae7f-77d4-4f1b-8b31-35dc7bbd981e%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

 

[Joe Cheng]

Bootstrap makes it dead simple to make links look like buttons:

http://getbootstrap.com/css/#buttons

Example:

tags$a(href="#try", class="btn btn-default",

  "Go to plot 2"

)

To view this discussion on the web visit https://groups.google.com/d/msgid/shiny-discuss/161f-581b3c00-1-de7460%40140603148.

[Laz C. Peterson]

Joe -

When I've tried doing that, the anchor links don’t seem to work.  I’ve only been able to get it to work with onClick Javascript.

~ Laz Peterson
Paravis, LLC

To view this discussion on the web visit https://groups.google.com/d/msgid/shiny-discuss/CAF_jjKpBnXo%2B1HJnXHJ5qxhBqDYrASBS6VMTp-xH5xr-Hb%3D%2B2Q%40mail.gmail.com.

[Joe Cheng]

Does this not work for you?

library(shiny)

ui <- fluidPage(

  tags$a(href="#try", class="btn btn-default", "Jump"),

  div(style = htmltools::css(height = "5000px")),

  uiOutput("try")

)

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

  output$try <- renderUI("hello")

}

shinyApp(ui, server)

[Laz C. Peterson]

Yes.  It does.

<facepalm>

I had a type-o.  Well hey, this one helped me out too.  :-)

Thanks Joe.

~ Laz Peterson
Paravis, LLC

To view this discussion on the web visit https://groups.google.com/d/msgid/shiny-discuss/CAF_jjKqaUrnMuJVkS2aQjR1%2BtSDqLcW4HVAda7OX6iAAq1JMsg%40mail.gmail.com.

[George Miranda]

Does this work if linking to a different page, for instance if linking across a navbarPage? When I try using navbarPage and try linking from one tabPanel to another, it doesn't work for me. 

library(shiny)

ui <- navbarPage( title = "",

    tabPanel("Home", fluidRow(tags$a(href="#try", class="btn btn-default", "Jump")) ),

    

    tabPanel("Other", fluidRow( uiOutput("try") ) )

)

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

    output$try <- renderUI("hello")

}

shinyApp(ui, server)

[Joe Cheng]

Sorry, that won't work--you can only use #anchor style href's to jump to something that's already showing (unless you write some custom JS to get exactly the behavior you want).

[DCR]

Hi - 

To follow up with Joe's response, using some custom JS is the way to go. The href values are regenerated at each run making it impossible to using href. One work around is to assign a value to the each tabPanel, and then target that with some js. This SO post has an example on how to do that: https://stackoverflow.com/questions/36412407/shiny-add-link-to-another-tabpanel-in-another-tabpanel. For readability, it might be easier to put the js in a different file, and then include the js file using tagList

ui <-tagList(
           tags$head(includeScript("/path/to/js"),
           navbarPage(...)                          ## tabs go here
 )

As an example, your tab panel(s) may look something like this.

tabPanel("My First Tab",
          value = "tab1",

          h1("Some title here"),

          p("...some cool stuff will go here..."),

          tags$a("Go to tab 2", 

                  onclick="fakeClick('tab2')", 

                  class="btn btn-default")

               ),

tabPanel("My Second Tab", 
          value = "tab2",

          h1("Some title here"),

          p("...some cool stuff will go here..."),

          tags$a("Go to tab 1", 

                  onclick="fakeClick('tab1')", 

                  class="btn btn-default")

               )

Hope that helps!

- David

[George Miranda]

Thanks for that JS! I don't know much JS and yet it worked very easily for me by copy/pasting and changing the tab names. Thanks again!