Giter VIP home page Giter VIP logo

Comments (4)

ebailey78 avatar ebailey78 commented on August 22, 2024

I can't get your example to run, I think it is a problem with the DT package. I've never used it before. But I think you would want to do something like this:

library("shiny")
library("shinydashboard")
library("datasets")
library("DT")
library("shinyBS")

header <- dashboardHeader()

sidebar <- dashboardSidebar()

body <- dashboardBody(
  DT::dataTableOutput("mtcarsTable"),
  bsModal("mtCarsModal", "My Modal", "", tags$p("Hello World"), size = "small")
)

shinyApp(
  ui = dashboardPage(header, sidebar, body),
  server = function(input, output, session) {

    mtcarsLinked <- reactive({

      mtcars$mpg <- sapply(datasets::mtcars$mpg, function(x) {as.character(tags$a(href = "#", onclick = "$('#mtCarsModal').modal('show')", x))})
      print(class(mtcars))
      return(mtcars)

    })

    output$mtcarsTable <- DT::renderDataTable({
      return(DT::datatable(mtcars, 
                    class = 'compact',
                    escape = FALSE
      ))
    })
  }
)

Like I said, I can't get your example to actually run so this exact example might not work but something along these lines should. To have different data depending on what is clicked you would have to have extra javascript in your onclick event to update the innerHTML of $("#mtCarsModal .modal-body"), create separate modals for each link, or create a hidden input that updates on clicking a link and is attached to the server. Then have observers on the server watch for changes in that hidden input. (Use toggleModal() in the observer to open the modal)

Hope this helps,

Eric

from shinybs.

phillc73 avatar phillc73 commented on August 22, 2024

Thanks for the swift response Eric.

I had to edit your code slightly, but I have it working.

library("shiny")
library("shinydashboard")
library("datasets")
library("DT")
library("shinyBS")

header <- dashboardHeader()

sidebar <- dashboardSidebar()

body <- dashboardBody(
  DT::dataTableOutput("mtcarsTable"),
  bsModal("mtCarsModal", "My Modal", "",tags$p("Hello World"), size = "small")
)

shinyApp(
  ui = dashboardPage(header, sidebar, body),
  server = function(input, output, session) {

    mtcarsLinked <- reactive({   
      mtcars$mpg <- sapply(datasets::mtcars$mpg, function(x) {as.character(tags$a(href = "#", onclick = "$('#mtCarsModal').modal('show')", x))})
      return(mtcars)
    })

    output$mtcarsTable <- DT::renderDataTable({
      DT::datatable(mtcarsLinked(), 
                           class = 'compact',
                           escape = FALSE
      )
    })
  }
)

Next step is dynamic modal-body content based on the item selected.

Thanks for your help.

from shinybs.

pekaalto avatar pekaalto commented on August 22, 2024

@phillc73 Did you ever proceed with the next step?
I would love to have an example how to do dynamic modal based on the item clicked. Thanks

from shinybs.

pekaalto avatar pekaalto commented on August 22, 2024

Wow I figured it out. Here is an example if someone else winds up here.
Let me know if there is a better way.

library("shiny")
library("datasets")
library("DT")
library("shinyBS")

ui = shinyUI(fluidPage(
  DT::dataTableOutput("mtcarsTable"),
  bsModal("mtCarsModal", "My Modal", "",textOutput('mytext'), size = "small")
))

on_click_js = "
Shiny.onInputChange('mydata', '%s');
$('#mtCarsModal').modal('show')
"

convert_to_link = function(x) {
  as.character(tags$a(href = "#", onclick = sprintf(on_click_js,x), x))
}

shinyApp(
  ui = ui,
  server = function(input, output, session) {

    mtcarsLinked <- reactive({   
      mtcars$mpg <- sapply(
        datasets::mtcars$mpg,convert_to_link)
      return(mtcars)
    })

    output$mtcarsTable <- DT::renderDataTable({
      DT::datatable(mtcarsLinked(), 
                           class = 'compact',
                           escape = FALSE, selection='none'
      )
    })
    output$mytext = renderText(sprintf('mpg value is %s',input$mydata))
  }
)

source: https://ryouready.wordpress.com/2013/11/20/sending-data-from-client-to-server-and-back-using-shiny/

from shinybs.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.