Disable elements when Shiny is busy

问题

I'm using a piece of javascript from this question: SO

It works for buttons, but I would also like to disable things like sliderInput, selectInput and textInput as well.

I tried to replace the 'button' with 'input' which does disable the textinput fields. I am wondering whether there is a way to disable all elements in 1 go.

The bigger problem is the following: When you open the dropdownbutton, the close button normally should remove the modal dialog in case the javascript tag is removed from the demo app below. However, when the script is in the app, the close button doesn't work anymore for some reason. It still prints the text command, meaning it is observed, but the modal doesn't close. The other button in the dialog still works normally.

App:

library(shiny)
library(shinyWidgets)

ui <- fluidPage(
  h3('Disable buttons while running'),
  actionButton('btn_run','Run long process'),
  hr(),
  h3('Inputs'),
  actionButton('btn1','Button 1'),
  hr(),
  textInput('text1', 'Text1',"my text:"),
  hr(),
  selectInput('select1', 'Selectinput', choices = c('A', 'B', 'C'), selected = 'A'),
  hr(),
  h5('Dropdown'),
  dropdownButton(inputId = "MyDropDown",
                 h3("This is a dropdown"),
                 actionButton('btn_run2','Run other long process'),
                 fluidRow(actionButton( "CloseDropDown", "Close"), style = "float: right; margin-right:10px"),
                 icon = icon("tasks"),
                 tooltip = tooltipOptions(title = "Click to open"), width = "500px"),
  hr(),
  sliderInput('slid3','Slider 1',min=0,max=1,value=0.5),


tags$script(HTML("$(document).on('shiny:busy', function() {
  var inputs = document.getElementsByTagName('button');
console.log(inputs);
for (var i = 0; i < inputs.length; i++) {
inputs[i].disabled = true;
}
});

$(document).on('shiny:idle', function() {
var inputs = document.getElementsByTagName('button');
console.log(inputs);
for (var i = 0; i < inputs.length; i++) {
inputs[i].disabled = false;
}
})" ))
)

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

  observeEvent(input$btn_run,{
    Sys.sleep(5)
  })


  observeEvent(input$btn_run2,{
    Sys.sleep(5)
  })

  observeEvent(input$CloseDropDown, {print('closing?')
    toggleDropdownButton(inputId = 'MyDropDown') })

}

shinyApp(ui = ui, server = server)

回答1:

I cannot help you with the close button, though I found out that as soon as you set your shiny:idle handle, any call to JavaScript will fire shiny:idle and hence runs the handler instead of the JavaScript code behind toggleDropdownButton.

However, the first question of how to select more than one element in your JavaScript can be solved with a bit of jQuery. Change your code to

$(document).on('shiny:busy', function() {
  var $inputs = $('button,input');
console.log($inputs);
$inputs.prop('disabled', true);
});

$(document).on('shiny:idle', function() {
var $inputs = $('button,input');
console.log($inputs);
$inputs.prop('disabled', false);
})

With that you can select buttons and the text input. Now you can find out yourself which code to use to also disable the dropdown.

BTW: maybe you want to look at shinyjs::disable. With this function you can disable your controls from the R side. You would put that in the beginning of your long calculation and use shinyjs::enable at the end.

来源：https://stackoverflow.com/questions/52313596/disable-elements-when-shiny-is-busy

标签

javascript

Shiny

dropdownbutton