How the change attributes of UI elements with JavaScript in Shiny?-CodePudding

I know there is this server side method called renderUI, but it makes updating the UI extremely slow in some cases, so I am now relying on the JavaScript.

My problem is a follows. I would like to update the title attribute of material_card from shinymaterial package. I would like to see the title to change, every time I select an alternative from a separate dropdown menu.

So far my list of UI components contain tags$script() object, which is supposed to observe the changes in the selectInput (goes with id "dropdown").

My code looks as follows:

library(shinymaterial)
library(shiny)

ui <- material_page(

    titlePanel("Soon to be working JavaScript example!"),

    sidebarLayout(
        sidebarPanel(
            selectInput(
                "dropdown",
                "Dropdown menu",
                c('Hat','Shoes','Jacket')),
                tags$script('
              $(document).on("shiny:inputchanged", function(event) {
                if (event.name === "dropdown") {
                    if(input.dropdown === "Jacket") {
                  //Even this alert is not working, possibly because input.name is not recognized. :(
                  alert("You chose Jacket, now the material card title will be changed to: Jacket selected");
                  //What am I supposed to put here to update the material_card title?
                    } else {
                  //...and here as well...
                }
              });'
            ),
            material_card(
                depth=5,
                title = 'This value needs to be changed according what was chosen in the dropdown menu!')
        ),
        mainPanel(
           h5('Nothing here!')
        )
    )
)

server <- function(input, output) {

    #The server is empty, as it should. :)
}

shinyApp(ui = ui, server = server)

I managed to get the alert working without the if(input.dropdown === "Jacket") validation, but this validation is not working: Most likely input.dropdown is not even recognized, although it works nicely with conditional panel.

Furthermore, I am even more lost with the logic: How should I actually use JavaScript to update the material_card title, after the change in selectInput (dropdown) value has been observed?

CodePudding user response：

library(shinymaterial)
library(shiny)

ui <- material_page(
  
  titlePanel("Soon to be working JavaScript example!"),
  
  sidebarLayout(
    sidebarPanel(
      selectInput(
        "dropdown",
        "Dropdown menu",
        c('Hat','Shoes','Jacket')),
      tags$script(HTML('
              $(document).on("shiny:inputchanged", function(event) {
                if (event.name === "dropdown") {
                  if(event.value === "Jacket") {
                    alert("You chose Jacket, now the material card title will be changed to: Jacket selected");
                    $("#mycard>span.card-title").html("Here is the new card title");
                  } else {
                  //...and here as well...
                  }
                }
              });')
      ),
      material_card(
        depth=5,
        title = 'This value needs to be changed according what was chosen in the dropdown menu!',
        id = "mycard"
      )
    ),
    mainPanel(
      h5('Nothing here!')
    )
  )
)

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

CodePudding user response：

A shiny UI-only solution:

library(shinymaterial)
library(shiny)

dropdownChoices <- c('Hat','Shoes','Jacket')

ui <- material_page(
  
  titlePanel("Soon to be working JavaScript example!"),
  
  sidebarLayout(
    sidebarPanel(
      selectInput(
        "dropdown",
        "Dropdown menu",
        dropdownChoices),
      material_card(
        depth = 5,
        title = lapply(dropdownChoices, function(i){
          conditionalPanel(sprintf('input.dropdown == "%s"', i), i)
        })
      )),
    mainPanel(
      h5('Nothing here!')
    )
  )
)

server <- function(input, output) {}

shinyApp(ui = ui, server = server)