What is the best way to conceal a conditional panel in a Shiny app using JavaScript when any action or button is clicked that is not one of the designated inputs

I am looking for a way to hide the conditional panel shown below whenever there is any user input that is not related to clicking the "Delete" button or selecting an option from the selectInput() function in the conditional panel, as demonstrated in the image below. Since there will be various other user inputs like action buttons, radio buttons, and selectInputs, it is not practical to list each action that would hide the panel. The conditional panel should only be hidden when the "Delete" button is clicked. Any ideas on how to achieve this? The code is provided at the bottom.

https://i.sstatic.net/qO30Y.png

Code:

library(rhandsontable)
library(shiny)

mydata <- data.frame('Col 1' = c(1,24,0,1), check.names = FALSE)
rownames(mydata) <- c('Term A','Term B','Term C','Term D') 

ui <- fluidPage(br(),
      rHandsontableOutput("mytable"),br(),
        fluidRow(
          column(1,actionButton("addCol", "Add",width = '70px')),
          column(1,actionButton("delCol","Delete",width = '70px')),
          column(3,conditionalPanel(condition = "input.delCol",uiOutput("delCol"))) # js here
        )
)

server <- function(input, output) {
  
  output$mytable = renderRHandsontable(df())
  
  df <- eventReactive(input$addCol, {
    if(input$addCol > 0){
      newcol <- data.frame(mydata[,1])
      names(newcol) <- paste("Col",ncol(mydata)+1)
      mydata <<- cbind(mydata, newcol)
    }
    rhandsontable(mydata,rowHeaderWidth = 100, useTypes = TRUE)
  }, ignoreNULL = FALSE)
  
  observeEvent(input$delCol,
    {output$delCol<-renderUI(selectInput("delCol",label=NULL,choices=colnames(mydata),selected="Col 1"))}
    )
  
}

shinyApp(ui,server)

Answer №1

After taking Mike's advice, I decided to start working with shinyjs and utilize a simple example from the shinyjs reference manual, making some adjustments to include 2 buttons:

library(shiny)
library(shinyjs)

ui = fluidPage(
       useShinyjs(), # Initializing shinyjs
       actionButton("btn", "Click to display"),
       actionButton("btn1","Click to hide"),
       hidden(p(id = "element", "I was hidden"))
     )

server = function(input, output) {
  observeEvent(input$btn, {show("element")})
  observeEvent(input$btn1,{hide("element")})
  }

shinyApp(ui,server)

Further on, I adapted this example to fit into my original code as shown below. It's important to note that implementing a global hide function everytime there's any user input other than clicking the "Delete" button will require an observeEvent() for each user action that triggers selectInput(). While researching if this can be simplified, I will consider using multiple observeEvents() for now.

Code update:

library(rhandsontable)
library(shiny)
library(shinyjs)

mydata <- data.frame('Col 1' = c(1,24,0,1), check.names = FALSE)
rownames(mydata) <- c('Term A','Term B','Term C','Term D') 

ui <- fluidPage(
  useShinyjs(), # initializing shinyjs
  br(),
  rHandsontableOutput("mytable"),br(),
  fluidRow(
    column(1,actionButton("addCol", "Add",width = '70px')),
    column(1,actionButton("delCol","Delete",width = '70px')),
    column(3, hidden(uiOutput("delCol2")))) # hide selectInput()
)

server <- function(input,output,session){
  
  output$mytable = renderRHandsontable(dat())
  
  dat <- eventReactive(input$addCol, {
    if(input$addCol > 0){
      newcol <- data.frame(mydata[,1])
      names(newcol) <- paste("Col",ncol(mydata)+1)
      mydata <<- cbind(mydata, newcol)
    }
    rhandsontable(mydata,rowHeaderWidth = 100, useTypes = TRUE)
  }, ignoreNULL = FALSE)
  
  observeEvent(input$delCol, show("delCol2")) # clicking Delete button reveals selectInput()
   
  observeEvent(input$addCol, hide("delCol2")) # clicking Add hides selectInput()
  
  output$delCol2 <-renderUI({
    selectInput(
      "delCol3",
      label=NULL,
      choices=colnames(mydata),
      selected="Col 1"
    )
  })
  
}

shinyApp(ui,server)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guide on executing a Python script using Node.js

I have set up a node.js server on Raspberry Pi and encountered an issue when trying to run a python script from it. Despite receiving the correct output from the client, the file fails to execute in this instance involving socket.io. The socket functiona ...

Failure to return an error in the mongoose find function

While attempting to create some statics with Mongoose, I am facing an issue where I cannot access the error argument when using find() or findOne(). Below is my static method: User.statics.authenticate = function(login, password, cb){ return this.mode ...

JavaScript encountering errors while parsing JSON data

I'm struggling to filter some JSON information and display it in HTML classes. Despite my efforts, I can't seem to make it work. I feel like I'm not getting it. Can someone please assist me with this? $.ajax({ // Agenda type: ' ...

Breaking Down URLs with JavaScript

I am looking to extract specific portions of a URL and here is my progress so far. <script type='text/javascript'> var query = window.location.pathname.split( '/' ); query = window.location.pathname.split( '.html' ); v ...

Unable to receive URL parameters using JavaScript on a mobile device

I have been developing a program that displays all users' buttons on a screen, except for the current user's buttons. I came across this code snippet to extract URL parameters: function getParameterByName(name, url) { if (!url) url = window.lo ...

Grabbing nested JSON Array data using Node.js

As a beginner in Node.js, I’m attempting to extract data from the JSON below: var data1 = { "_id":"R1::table::A1::order::167::comanda::2", "_rev":"1-ed6df32d3b4df9cc8019e38d655a86f5", "comanda":[ [ { ...

The db.all method does not provide an array as its return variable

Seeking to extract an array from the db.all function to incorporate it into a custom JSON object for a response. Various attempts have been made including using Object.values(members), members.fulfillmentValue, and some PROMISE methods discovered on Stack ...

Encountering an error in resolving symbol values statically within the Angular module

Following a helpful guide, I have created the module below: @NgModule({ // ... }) export class MatchMediaModule { private static forRootHasAlreadyBeenCalled: boolean = false; // This method ensures that the providers of the feature module ar ...

Express/NodeJS encountering a CORS problem, causing services to be inaccessible in Internet Explorer

Currently, I am working on a REST-based service implemented in Express/NodeJS. The code includes CORS (Cross Origin Resource Sharing) implementation to allow services to be consumed from browsers like Chrome and Firefox. However, there seems to be an issue ...

Troubleshooting tips for when JavaScript fails to load

I have encountered an issue with my two websites that are using the same theme. The sites in question are and . Both of them are WP multisite subsites, and are utilizing the exact same child theme with identical template files. However, I have noticed th ...

Enhance the Material UI Data Grid by customizing the toolbar's default slots with the option to disable the

https://i.stack.imgur.com/0YV9m.png Background In my current project, I am utilizing the Datagrid component from MUI [email protected]. I have disabled the column menu to display the toolbar at the top of the table instead of on individual columns. ...

What is the method to show text on hover in angularjs?

I'm a beginner in AngularJS and I'm looking to show {{Project.inrtcvalue}} when the mouse hovers over values. Can anyone guide me on how to achieve this using AngularJS? <table ng-table="tableParams" show-filter="true" class="table" > ...

Create a class for the grandparent element

Is there a way to dynamically add a class to a dropdown menu item when a specific child element is clicked? Here's the HTML structure I have: <ul id="FirstLevel"> <li><a href="#">FirstLevel</a></li> <li>< ...

Issue with HTML form not correctly submitting AJAX request to controller

My attempt to utilize ajax on the add to cart form doesn't seem to be working as expected. When I click on the Add to Cart button, it displays a blank page because I have implemented an ajax check method in the controller. Controller public functio ...

Discovering the presence of a value within nested arrays

let array = [["1", "2], ["3", "4"], ["5", "6"]] My goal is to check whether the digit "4" is present in the given array ...

What is the best way to replace multiple strings with bold formatting in JavaScript without losing the previous bolded text?

function boldKeywords(inputString, keywords){ for (var i = 0; i < keywords.length; i++) { var key = keywords[i]; if (key) inputString= inputString.replace(new RegExp(key, 'gi'), '<strong>' + ...

Tips for inserting values into an array in NodeJS

Hello there! I am currently in the process of learning Node and experimenting with some interesting things using JavaScript and Node.js. However, I have hit a roadblock while trying to combine separate "where" statements in Sequelize into one cohesive stat ...

Here is a step-by-step guide on creating a custom select all checkbox in the toolbar of a MUI

I am currently using the MUI data grid to build my table, with the following properties: <DataGrid rows={serialsList || []} columns={columns} rowsPerPageOptions={[25, 50, 100]} //pageSize={93} ...

Create a MongoDB query using AJAX

My goal is to fetch the count of users using the email [email protected] through the ajax request below: function getUserCount(event) { event.preventDefault(); var queryCount = { email:'<a href="/cdn-cgi/l/email-protection" class="__cf_e ...

Refreshing an iFrame in NextJS from a different component

I am working on a NextJS application that includes a specific page structure: Page: import Layout from "@/components/app/Layout"; import Sidebar from "@/components/app/Sidebar"; export default function SiteIndex() { return ( < ...